@arcblock/ux 2.7.15 → 2.7.16

package/es/SessionManager/index.js

@@ -1,60 +1,27 @@
-/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
-import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
-import BindWalletIcon from '@mui/icons-material/Link';
-import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
-import SwitchDidIcon from '@arcblock/icons/lib/Switch';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import noop from 'lodash/noop';
 import isEmpty from 'lodash/isEmpty';
+import { useLatest, useMemoizedFn } from 'ahooks';
 import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import { getUserAvatar } from '../Util';
+import { getUserAvatar, sleep } from '../Util';
 import FederatedLoginDetecter from './federated-login-detecter';
 import UserPopper from './user-popper';
+import UserInfo from './user-info';
+import { translate } from '../Locale/util';
+import ManageAccounts from './manage-accounts';
+import ManageBlocklet from './manage-blocklet';
+import { translations } from './translation';
+import { getConnectedAccounts, getSourceProvider } from './utils';
+import useAccounts from './use-accounts';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const translations = {
-  en: {
-    account: 'account',
-    switchDid: 'Switch DID',
-    switchTo: 'Switch to',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with'
-  },
-  zh: {
-    account: '账号',
-    switchDid: '切换账户',
-    switchTo: '切换至',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    connectedWith: '连接至'
-  }
-};
-const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
-const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
 function SessionManager({
   session,
   locale,
@@ -76,30 +43,29 @@ function SessionManager({
   size,
   ...rest
 }) {
-  const translation = translations[locale] || translations.en;
+  const latestSession = useLatest(session);
+  const {
+    connectAccount
+  } = useAccounts();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const userAnchorRef = useRef(null);
-  // eslint-disable-next-line react/prop-types
   const {
     logoutOAuth,
-    bindOAuth,
-    configs: oauthConfigs,
     switchOAuthPassport
   } = session.useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-  const currentRole = useMemo(() => session.user?.passports?.find(item => item.name === session.user.role), [session.user]);
-  const browser = useBrowser();
-  // eslint-disable-next-line react/prop-types
-  const {
-    walletDid
-  } = session.useDid({
-    session
-  });
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
-  const federatedAccount = connectedAccounts.find(item => item.provider === 'federated');
+  const isFirstLoading = useMemo(() => {
+    return session?.initialized === false && session?.loading === true;
+  }, [session?.initialized, session?.loading]);
+
+  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -111,19 +77,57 @@ function SessionManager({
     hasBindAccount = true;
     hasBindWallet = true;
   }
-  const oauthConfigList = Object.entries(oauthConfigs).map(([key, value]) => {
-    return {
-      ...value,
-      provider: key
+  const _connectAccount = useMemoizedFn(async () => {
+    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
+    await sleep();
+    if (!latestSession.current?.user) {
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const blocklet = window?.blocklet;
+    if (!blocklet) {
+      return;
+    }
+    const currentApp = {
+      appId: blocklet.appId,
+      appPid: blocklet.appPid,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      provider: 'wallet'
     };
-  }).filter(item => item.enabled);
-  const isFirstLoading = useMemo(() => {
-    // eslint-disable-next-line react/prop-types
-    return session?.initialized === false && session?.loading === true;
-    // eslint-disable-next-line react/prop-types
-  }, [session?.initialized, session?.loading]);
-  const masterSiteInfo = window.blocklet?.settings?.federated?.master;
-  const currentSiteInfo = window.blocklet;
+    const federatedMaster = blocklet.settings?.federated?.master;
+    const masterApp = isEmpty(federatedMaster) ? null : {
+      appId: federatedMaster.appId,
+      appName: federatedMaster.appName,
+      appDescription: federatedMaster.appDescription,
+      appLogo: federatedMaster.appLogo,
+      appPid: federatedMaster.appPid,
+      appUrl: federatedMaster.appUrl,
+      version: federatedMaster.version,
+      provider: 'federated'
+    };
+    const loginAccount = {
+      did: latestSession.current.user.did,
+      avatar: latestSession.current.user.avatar,
+      provider: latestSession.current.provider,
+      ...(latestSession.current.provider === 'federated' ? masterApp : currentApp)
+    };
+    connectAccount(loginAccount);
+  });
+
+  // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
+  // 同时可用于以前的站点，会自动生成一个已连接的账号
+  useEffect(() => {
+    if (session.user) {
+      _connectAccount();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user]);
   if (!session.user) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [showText ? /*#__PURE__*/_jsxs(Button, {
@@ -144,7 +148,7 @@ function SessionManager({
           style: {
             lineHeight: '25px'
           },
-          children: translation.connect
+          children: t('connect')
         })]
       }) : /*#__PURE__*/_jsx(IconButton, {
         ref: userAnchorRef,
@@ -185,15 +189,21 @@ function SessionManager({
   function onToggleUser() {
     setUserOpen(prevOpen => !prevOpen);
   }
+  function close() {
+    setUserOpen(false);
+  }
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-    setUserOpen(false);
+    close();
   }
   function _onLogin() {
     if (!isFirstLoading) {
-      session.login(onLogin);
+      session.login((...args) => {
+        _connectAccount();
+        onLogin(...args);
+      });
     }
   }
   function _onLogout() {
@@ -206,7 +216,7 @@ function SessionManager({
       }).catch(err => {
         console.error(err);
       }).finally(() => {
-        setUserOpen(false);
+        close();
       });
     });
   }
@@ -214,29 +224,10 @@ function SessionManager({
    * @name 切换账户
    * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
    */
-  function _onSwitchDid() {
-    const {
-      provider,
-      user
-    } = session;
-    if (!user) return;
-    let targetProvider = provider;
-    if (provider === 'federated') {
-      targetProvider = 'wallet';
-    } else if (['auth0', 'wallet'].includes(provider)) {
-      targetProvider = 'federated';
-    }
-    session.switchDid((...args) => {
-      setUserOpen(false);
-      onSwitchDid(...args);
-    }, {
-      provider: targetProvider,
-      providerMode: 'paramsFirst'
-    });
-  }
+
   function _onSwitchProfile() {
     session.switchProfile((...args) => {
-      setUserOpen(false);
+      close();
       onSwitchProfile(...args);
     });
   }
@@ -248,25 +239,13 @@ function SessionManager({
     if (!isRawWalletAccount && provider !== 'federated') {
       switchOAuthPassport(user);
     } else {
-      setUserOpen(false);
+      close();
       session.switchPassport((...args) => {
-        setUserOpen(false);
+        close();
         onSwitchPassport(...args);
       });
     }
   }
-  function _onBindWallet() {
-    setUserOpen(false);
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet((...args) => {
-        setUserOpen(false);
-        onBindWallet(...args);
-      });
-    } else {
-      bindOAuth();
-    }
-  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(IconButton, {
       ref: userAnchorRef,
@@ -295,140 +274,34 @@ function SessionManager({
         sx: {
           p: 0
         },
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "session-manager-user",
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: "session-manager-user-name",
-            role: "button",
-            "aria-label": "User info panel",
-            children: [/*#__PURE__*/_jsx("span", {
-              children: session.user.fullName
-            }), !!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && /*#__PURE__*/_jsx(Chip, {
-              label: currentRole?.title || session.user?.role.toUpperCase(),
-              size: "small",
-              variant: "outlined",
-              sx: {
-                height: 'auto',
-                marginRight: 0
-              },
-              icon: /*#__PURE__*/_jsx(SvgIcon, {
-                component: ShieldCheck,
-                size: "small"
-              })
-            })]
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "session-manager-id-list",
-            "aria-label": "User DID list",
-            children: [walletDid && /*#__PURE__*/_jsx("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/_jsx(DidAddress, {
-                responsive: false,
-                children: walletDid
-              })
-            }), federatedAccount && /*#__PURE__*/_jsx("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/_jsx(DidAddress, {
-                responsive: false,
-                children: federatedAccount.did
-              })
-            }), session?.user?.email && /*#__PURE__*/_jsx("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/_jsx(DidAddress, {
-                responsive: false,
-                children: session.user.email
-              })
-            })]
-          })]
-        }), Array.isArray(menu) && menu.map((menuItem, index) => {
-          const {
-            svgIcon,
-            ...menuProps
-          } = menuItem;
-          return /*#__PURE__*/_jsxs(MenuItem, {
-            className: "session-manager-menu-item",
-            ...menuProps,
-            icon: undefined,
-            label: undefined,
-            children: [svgIcon ? svgIcon && /*#__PURE__*/_jsx(SvgIcon, {
-              component: svgIcon,
-              className: "session-manager-menu-icon"
-            }) : menuItem.icon, menuItem.label]
-          }, index);
-        }), menuRender({
-          classes: {
-            menuItem: 'session-manager-menu-item',
-            menuIcon: 'session-manager-menu-icon'
-          }
-        }), !browser.wallet && /*#__PURE__*/_jsxs(MenuItem, {
-          component: "a",
-          className: "session-manager-menu-item",
-          "data-cy": "sessionManager-openInWallet",
-          href: "https://www.abtwallet.io/",
-          "aria-label": translation.openInWallet,
-          target: "_blank",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: OpenInIcon,
-            className: "session-manager-menu-icon"
-          }), translation.openInWallet]
-        }), !isEmpty(masterSiteInfo) && !!switchDid && /*#__PURE__*/_jsxs(MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchDid,
-          "aria-label": translation.switchDid,
-          "data-cy": "sessionManager-switch-trigger",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: SwitchDidIcon,
-            className: "session-manager-menu-icon"
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              whiteSpace: 'normal',
-              wordBreak: 'break-all'
-            },
-            children: [translation.switchTo, session.provider === 'federated' ? /*#__PURE__*/_jsx(Link, {
-              mx: 1,
-              href: currentSiteInfo.appUrl,
-              underline: "hover",
-              target: "_blank",
-              title: currentSiteInfo.appName,
-              "aria-label": "Open current site url",
-              children: currentSiteInfo.appName
-            }) : /*#__PURE__*/_jsx(Link, {
-              mx: 1,
-              href: masterSiteInfo.appUrl,
-              underline: "hover",
-              target: "_blank",
-              title: masterSiteInfo.appName,
-              "aria-label": "Open federated master site url",
-              children: masterSiteInfo.appName
-            }), translation.account]
-          })]
-        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchProfile,
-          "aria-label": translation.switchProfile,
-          "data-cy": "sessionManager-switch-profile-trigger",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: SwitchProfileIcon,
-            className: "session-manager-menu-icon"
-          }), translation.switchProfile]
-        }), !!switchPassport && /*#__PURE__*/_jsxs(MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchPassport,
-          "aria-label": translation.switchPassport,
-          "data-cy": "sessionManager-switch-passport-trigger",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: SwitchPassportIcon,
-            className: "session-manager-menu-icon"
-          }), translation.switchPassport]
-        }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onBindWallet,
-          "aria-label": !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`,
-          "data-cy": "sessionManager-bind-trigger",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: BindWalletIcon,
-            className: "session-manager-menu-icon"
-          }), !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
+        children: [/*#__PURE__*/_jsx(UserInfo, {
+          session: session,
+          size: size,
+          locale: locale,
+          onEditUser: () => {
+            close();
+            _onSwitchProfile();
+          },
+          onSwitchPassport: () => {
+            close();
+            _onSwitchPassport();
+          },
+          close: close,
+          switchProfile: switchProfile,
+          hasBindWallet: hasBindWallet
+        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ManageAccounts, {
+          session: session,
+          locale: locale,
+          onBindWallet: onBindWallet,
+          onSwitchDid: onSwitchDid,
+          connectAccount: _connectAccount,
+          close: close,
+          hasBindAccount: hasBindAccount
+        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ManageBlocklet, {
+          menu: menu,
+          menuRender: menuRender,
+          locale: locale
+        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onLogout,
           disabled: disableLogout,
@@ -437,7 +310,7 @@ function SessionManager({
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: DisconnectIcon,
             className: "session-manager-menu-icon"
-          }), translation.disconnect]
+          }), t('disconnect')]
         })]
       })
     })]

package/es/SessionManager/manage-accounts.js

@@ -0,0 +1,143 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-bind */
+import { useMemoizedFn, useUpdate } from 'ahooks';
+import { MenuItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import AccountIcon from '@arcblock/icons/lib/Account';
+import LinkIcon from '@iconify-icons/mdi/link';
+import AccountItem from './account-item';
+import MenuAccordion from './menu-accordion';
+import { translations } from './translation';
+import { translate } from '../Locale/util';
+import { useConfirm } from '../Dialog/confirm';
+import { getSourceProvider } from './utils';
+import AddAccountItem from './add-account-item';
+import useAccounts from './use-accounts';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ManageAccounts({
+  session,
+  locale,
+  onBindWallet,
+  onSwitchDid,
+  connectAccount,
+  close,
+  hasBindAccount
+}) {
+  const {
+    bindOAuth,
+    configs: oauthConfigs
+  } = session.useOAuth();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const {
+    confirmApi,
+    confirmHolder
+  } = useConfirm();
+  const {
+    accounts,
+    setAccounts
+  } = useAccounts();
+  const update = useUpdate();
+  const onChoose = useMemoizedFn((account, {
+    active
+  }) => {
+    if (active) {
+      return;
+    }
+    close();
+    session.switchDid((...args) => {
+      connectAccount();
+      onSwitchDid(...args);
+    }, {
+      provider: account.provider,
+      providerMode: 'paramsFirst'
+    });
+  });
+  const oauthConfigList = Object.entries(oauthConfigs).map(([key, value]) => {
+    return {
+      ...value,
+      provider: key
+    };
+  }).filter(item => item.enabled);
+  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
+  const onDelete = useMemoizedFn((account, {
+    active
+  }) => {
+    if (active) {
+      return;
+    }
+    confirmApi.open({
+      title: t('deleteAccountTitle'),
+      content: t('deleteAccountContent'),
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      onConfirm(done) {
+        const findIndex = accounts.findIndex(item => item.did === account.did);
+        if (findIndex >= 0) {
+          accounts.splice(findIndex, 1);
+        }
+        setAccounts(accounts);
+        update();
+        done();
+      }
+    });
+  });
+  const onAdd = useMemoizedFn(app => {
+    close();
+    session.switchDid((...args) => {
+      connectAccount();
+      update();
+      onSwitchDid(...args);
+    }, {
+      provider: app.provider,
+      providerMode: 'paramsFirst'
+    });
+  });
+  function _onBindWallet() {
+    close();
+    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
+    if (!isRawWalletAccount) {
+      session.bindWallet(onBindWallet);
+    } else {
+      bindOAuth();
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(MenuAccordion, {
+      locale: locale,
+      title: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(AccountIcon, {
+          className: "session-manager-menu-icon",
+          style: {
+            width: 24,
+            height: 24
+          }
+        }), t('manageAccounts')]
+      }),
+      children: [accounts.map(item => /*#__PURE__*/_jsx(AccountItem, {
+        account: item,
+        locale: locale,
+        active: session.user.did === item.did,
+        onDelete: onDelete,
+        onChoose: onChoose
+      }, item.did)), /*#__PURE__*/_jsx(AddAccountItem, {
+        locale: locale,
+        onAdd: onAdd
+      }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
+        className: "session-manager-menu-item",
+        onClick: _onBindWallet,
+        "aria-label": !isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`,
+        "data-cy": "sessionManager-bind-trigger",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: LinkIcon,
+          width: 24,
+          height: 24,
+          className: "session-manager-menu-icon"
+        }), !isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`]
+      })]
+    }), confirmHolder]
+  });
+}

package/es/SessionManager/manage-blocklet.js

@@ -0,0 +1,62 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import { useMemoizedFn } from 'ahooks';
+import { Icon } from '@iconify/react';
+import AppsIcon from '@iconify-icons/mdi/apps';
+import { MenuItem, SvgIcon } from '@mui/material';
+import MenuAccordion from './menu-accordion';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ManageBlocklet({
+  menu,
+  menuRender,
+  locale
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/_jsxs(MenuAccordion, {
+    locale: locale,
+    title: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: AppsIcon,
+        width: 24,
+        height: 24,
+        className: "session-manager-menu-icon"
+      }), t('manageBlocklet')]
+    }),
+    children: [Array.isArray(menu) && menu.map((menuItem, index) => {
+      const {
+        svgIcon,
+        ...menuProps
+      } = menuItem;
+      return /*#__PURE__*/_jsxs(MenuItem, {
+        className: "session-manager-menu-item",
+        ...menuProps,
+        icon: undefined,
+        label: undefined,
+        children: [svgIcon ? svgIcon && /*#__PURE__*/_jsx(SvgIcon, {
+          component: svgIcon,
+          className: "session-manager-menu-icon"
+        }) : menuItem.icon, menuItem.label]
+      }, index);
+    }), menuRender({
+      classes: {
+        menuItem: 'session-manager-menu-item',
+        menuIcon: 'session-manager-menu-icon'
+      }
+    })]
+  });
+}
+ManageBlocklet.propTypes = {
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  locale: PropTypes.string.isRequired
+};
+ManageBlocklet.defaultProps = {
+  menu: [],
+  menuRender: () => {}
+};