refactor: Remove Accountbox usage (#29786)

apps/meteor/app/lib/README.md

@@ -47,19 +47,6 @@ settingsRegistry.addGroup('Settings_Group', function() {
 * `enableQuery` - Only enable this setting if the correspondent setting has the value specified
 * `alert` - Shows an alert message with the given text
 
-### AccountBox
-
-You can add items to the left upper corner drop menu:
-```javascript
-AccountBox.addItem({
- name: 'Livechat',
- icon: 'icon-chat-empty',
- class: 'livechat-manager',
- condition: () => {
- return RocketChat.authz.hasPermission('view-livechat-manager');
- }
-});
-```
 
 ### Functions
 n/a

apps/meteor/app/livechat/client/ui.js

@@ -1,14 +1,4 @@
-import { settings } from '../../settings/client';
-import { hasAllPermission } from '../../authorization/client';
-import { AccountBox, MessageTypes } from '../../ui-utils/client';
-
-AccountBox.addItem({
- name: 'Omnichannel',
- icon: 'headset',
- href: '/omnichannel/current',
- sideNav: 'omnichannelFlex',
- condition: () => settings.get('Livechat_enabled') && hasAllPermission('view-livechat-manager'),
-});
+import { MessageTypes } from '../../ui-utils/client';
 
 MessageTypes.registerType({
  id: 'livechat-close',

apps/meteor/app/ui-utils/client/index.ts

@@ -1,6 +1,5 @@
 import './lib/messageActionDefault';
 
-export { AccountBox } from './lib/AccountBox';
 export { MessageAction } from './lib/MessageAction';
 export { messageBox } from './lib/messageBox';
 export { readMessage } from './lib/readMessages';

apps/meteor/app/ui-utils/client/lib/AccountBox.ts

@@ -1,12 +1,9 @@
 import type { IUIActionButton, IUActionButtonWhen } from '@rocket.chat/apps-engine/definition/ui/IUIActionButtonDescriptor';
 import type { UserStatus } from '@rocket.chat/core-typings';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Tracker } from 'meteor/tracker';
 import type { TranslationKey, LocationPathname } from '@rocket.chat/ui-contexts';
 import type { Icon } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
-import { applyDropdownActionButtonFilters } from '../../../ui-message/client/actionButtons/lib/applyButtonFilters';
 import { sdk } from '../../../utils/client/lib/SDKClient';
 
 export interface IAppAccountBoxItem extends IUIActionButton {
@@ -30,38 +27,9 @@ export type AccountBoxItem = {
 export const isAppAccountBoxItem = (item: IAppAccountBoxItem | AccountBoxItem): item is IAppAccountBoxItem => 'isAppButtonItem' in item;
 
 class AccountBoxBase {
- private items = new ReactiveVar<IAppAccountBoxItem[]>([]);
-
  public setStatus(status: UserStatus, statusText?: string): any {
  return sdk.rest.post('/v1/users.setStatus', { status, message: statusText });
  }
-
- public async addItem(newItem: IAppAccountBoxItem): Promise<void> {
- Tracker.nonreactive(() => {
- const actual = this.items.get();
- actual.push(newItem);
- this.items.set(actual);
- });
- }
-
- public async deleteItem(item: IAppAccountBoxItem): Promise<void> {
- Tracker.nonreactive(() => {
- const actual = this.items.get();
- const itemIndex = actual.findIndex((actualItem: IAppAccountBoxItem) => actualItem.appId === item.appId);
- actual.splice(itemIndex, 1);
- this.items.set(actual);
- });
- }
-
- public getItems(): (IAppAccountBoxItem | AccountBoxItem)[] {
- return this.items.get().filter((item: IAppAccountBoxItem | AccountBoxItem) => {
- if ('condition' in item) {
- return item.condition();
- }
-
- return applyDropdownActionButtonFilters(item);
- });
- }
 }
 
 export const AccountBox = new AccountBoxBase();

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx

@@ -1,26 +1,62 @@
-import { useTranslation, useRoute, useMethod, useSetModal, useRole, useRouter } from '@rocket.chat/ui-contexts';
+import {
+ useTranslation,
+ useRoute,
+ useMethod,
+ useSetModal,
+ useRole,
+ useRouter,
+ useAtLeastOnePermission,
+ usePermission,
+} from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { AccountBoxItem } from '../../../../../app/ui-utils/client/lib/AccountBox';
 import type { UpgradeTabVariant } from '../../../../../lib/upgradeTab';
 import { getUpgradeTabLabel, isFullyFeature } from '../../../../../lib/upgradeTab';
 import Emoji from '../../../../components/Emoji';
 import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 import RegisterWorkspaceModal from '../../../../views/admin/cloud/modals/RegisterWorkspaceModal';
 import { useUpgradeTabParams } from '../../../../views/hooks/useUpgradeTabParams';
 
-type useAdministrationItemProps = {
- accountBoxItems: AccountBoxItem[];
- showWorkspace: boolean;
-};
-export const useAdministrationItems = ({ accountBoxItems, showWorkspace }: useAdministrationItemProps): GenericMenuItemProps[] => {
+const ADMIN_PERMISSIONS = [
+ 'view-statistics',
+ 'run-import',
+ 'view-user-administration',
+ 'view-room-administration',
+ 'create-invite-links',
+ 'manage-cloud',
+ 'view-logs',
+ 'manage-sounds',
+ 'view-federation-data',
+ 'manage-email-inbox',
+ 'manage-emoji',
+ 'manage-outgoing-integrations',
+ 'manage-own-outgoing-integrations',
+ 'manage-incoming-integrations',
+ 'manage-own-incoming-integrations',
+ 'manage-oauth-apps',
+ 'access-mailer',
+ 'manage-user-status',
+ 'access-permissions',
+ 'access-setting-permissions',
+ 'view-privileged-setting',
+ 'edit-privileged-setting',
+ 'manage-selected-settings',
+ 'view-engagement-dashboard',
+ 'view-moderation-console',
+];
+
+export const useAdministrationItems = (): GenericMenuItemProps[] => {
  const router = useRouter();
  const t = useTranslation();
 
+ const shouldShowAdminMenu = useAtLeastOnePermission(ADMIN_PERMISSIONS);
+
  const { tabType, trialEndDate, isLoading } = useUpgradeTabParams();
  const shouldShowEmoji = isFullyFeature(tabType);
+
  const label = getUpgradeTabLabel(tabType);
+
  const isAdmin = useRole('admin');
  const setModal = useSetModal();
 
@@ -36,8 +72,18 @@ export const useAdministrationItems = ({ accountBoxItems, showWorkspace }: useAd
  const adminRoute = useRoute('admin-index');
  const upgradeRoute = useRoute('upgrade');
  const cloudRoute = useRoute('cloud');
+
+ const omnichannel = usePermission('view-livechat-manager');
+
  const showUpgradeItem = !isLoading && tabType;
 
+ const omnichannelItem: GenericMenuItemProps = {
+ id: 'omnichannel',
+ content: t('Omnichannel'),
+ icon: 'headset',
+ onClick: () => router.navigate('/omnichannel/current'),
+ };
+
  const upgradeItem: GenericMenuItemProps = {
  id: 'showUpgradeItem',
  content: (
@@ -71,24 +117,10 @@ export const useAdministrationItems = ({ accountBoxItems, showWorkspace }: useAd
  },
  };
 
- const accountBoxItem: GenericMenuItemProps[] = accountBoxItems.map((item, key) => {
- const action = () => {
- if (item.href) {
- router.navigate(item.href);
- }
- };
- return {
- id: `account-box-item-${key}`,
- content: t(item.name),
- icon: item.icon,
- onClick: action,
- };
- });
-
  return [
- ...(showUpgradeItem ? [upgradeItem] : []),
- ...(isAdmin ? [adminItem] : []),
- ...(showWorkspace ? [workspaceItem] : []),
- ...(accountBoxItems.length ? accountBoxItem : []),
- ];
+ showUpgradeItem && upgradeItem,
+ isAdmin && adminItem,
+ omnichannel && omnichannelItem,
+ shouldShowAdminMenu && workspaceItem,
+ ].filter(Boolean) as GenericMenuItemProps[];
 };

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.tsx

@@ -1,72 +1,20 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useAtLeastOnePermission, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 
-import { AccountBox } from '../../../../../app/ui-utils/client';
-import type { IAppAccountBoxItem, AccountBoxItem } from '../../../../../app/ui-utils/client/lib/AccountBox';
-import { isAppAccountBoxItem } from '../../../../../app/ui-utils/client/lib/AccountBox';
-import { useHasLicenseModule } from '../../../../../ee/client/hooks/useHasLicenseModule';
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
+import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 import { useAdministrationItems } from './useAdministrationItems';
 import { useAppsItems } from './useAppsItems';
 import { useAuditItems } from './useAuditItems';
 
-const ADMIN_PERMISSIONS = [
- 'view-statistics',
- 'run-import',
- 'view-user-administration',
- 'view-room-administration',
- 'create-invite-links',
- 'manage-cloud',
- 'view-logs',
- 'manage-sounds',
- 'view-federation-data',
- 'manage-email-inbox',
- 'manage-emoji',
- 'manage-outgoing-integrations',
- 'manage-own-outgoing-integrations',
- 'manage-incoming-integrations',
- 'manage-own-incoming-integrations',
- 'manage-oauth-apps',
- 'access-mailer',
- 'manage-user-status',
- 'access-permissions',
- 'access-setting-permissions',
- 'view-privileged-setting',
- 'edit-privileged-setting',
- 'manage-selected-settings',
- 'view-engagement-dashboard',
- 'view-moderation-console',
-];
-
 export const useAdministrationMenu = () => {
  const t = useTranslation();
- const getAccountBoxItems = useMutableCallback(() => AccountBox.getItems());
- const accountBoxItems = useReactiveValue(getAccountBoxItems);
-
- const hasAuditLicense = useHasLicenseModule('auditing') === true;
- const hasManageAppsPermission = usePermission('manage-apps');
- const hasAccessMarketplacePermission = usePermission('access-marketplace');
- const hasAdminPermission = useAtLeastOnePermission(ADMIN_PERMISSIONS);
- const hasAuditPermission = usePermission('can-audit') && hasAuditLicense;
- const hasAuditLogPermission = usePermission('can-audit-log') && hasAuditLicense;
-
- const appBoxItems = accountBoxItems.filter((item): item is IAppAccountBoxItem => isAppAccountBoxItem(item));
- const adminBoxItems = accountBoxItems.filter((item): item is AccountBoxItem => !isAppAccountBoxItem(item));
 
- const showAdmin = hasAdminPermission || !!adminBoxItems.length;
- const showAudit = hasAuditPermission || hasAuditLogPermission;
- const showWorkspace = hasAdminPermission;
- const showApps = hasAccessMarketplacePermission || hasManageAppsPermission || !!appBoxItems.length;
-
- const administrationItems = useAdministrationItems({ accountBoxItems: adminBoxItems, showWorkspace });
+ const administrationItems = useAdministrationItems();
  const appItems = useAppsItems();
- const auditItems = useAuditItems({ showAudit: hasAuditPermission, showAuditLog: hasAuditLogPermission });
-
- const sections = [
- { title: t('Administration'), items: administrationItems, permission: showAdmin },
- { title: t('Apps'), items: appItems, permission: showApps },
- { title: t('Audit'), items: auditItems, permission: showAudit },
- ];
+ const auditItems = useAuditItems();
 
- return sections.filter(({ permission }) => permission);
+ return [
+ administrationItems.length && { title: t('Administration'), items: administrationItems },
+ appItems.length && { title: t('Apps'), items: appItems },
+ auditItems.length && { title: t('Audit'), items: auditItems },
+ ].filter(Boolean) as Array<{ title: string; items: GenericMenuItemProps[] }>;
 };

apps/meteor/client/sidebar/header/actions/hooks/useAuditItems.tsx

@@ -1,18 +1,23 @@
-import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
+import { useTranslation, useRoute, usePermission } from '@rocket.chat/ui-contexts';
 
+import { useHasLicenseModule } from '../../../../../ee/client/hooks/useHasLicenseModule';
 import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 
-type useAuditItemsProps = {
- showAudit: boolean;
- showAuditLog: boolean;
-};
+export const useAuditItems = (): GenericMenuItemProps[] => {
+ const hasAuditLicense = useHasLicenseModule('auditing') === true;
+
+ const hasAuditPermission = usePermission('can-audit') && hasAuditLicense;
+ const hasAuditLogPermission = usePermission('can-audit-log') && hasAuditLicense;
 
-export const useAuditItems = ({ showAudit, showAuditLog }: useAuditItemsProps): GenericMenuItemProps[] => {
  const t = useTranslation();
 
  const auditHomeRoute = useRoute('audit-home');
  const auditSettingsRoute = useRoute('audit-log');
 
+ if (!hasAuditPermission && !hasAuditLogPermission) {
+ return [];
+ }
+
  const auditMessageItem: GenericMenuItemProps = {
  id: 'messages',
  icon: 'document-eye',
@@ -26,5 +31,5 @@ export const useAuditItems = ({ showAudit, showAuditLog }: useAuditItemsProps):
  onClick: () => auditSettingsRoute.push(),
  };
 
- return [...(showAudit ? [auditMessageItem] : []), ...(showAuditLog ? [auditLogItem] : [])];
+ return [hasAuditPermission && auditMessageItem, hasAuditLogPermission && auditLogItem].filter(Boolean) as GenericMenuItemProps[];
 };

apps/meteor/client/sidebar/header/hooks/useStatusItems.tsx

@@ -2,10 +2,9 @@ import type { IUser, ValueOf } from '@rocket.chat/core-typings';
 import { UserStatus as UserStatusEnum } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import { AccountBox } from '../../../../app/ui-utils/client';
 import { userStatus } from '../../../../app/user-status/client';
 import { callbacks } from '../../../../lib/callbacks';
 import type { GenericMenuItemProps } from '../../../components/GenericMenu/GenericMenuItem';
@@ -27,9 +26,10 @@ const translateStatusName = (t: ReturnType<typeof useTranslation>, status: (type
 export const useStatusItems = (user: IUser): GenericMenuItemProps[] => {
  const t = useTranslation();
  const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
+ const setStatus = useEndpoint('POST', '/v1/users.setStatus');
 
- const setStatus = (status: (typeof userStatus.list)['']): void => {
- AccountBox.setStatus(status.statusType, !isDefaultStatus(status.id) ? status.name : '');
+ const setStatusAction = (status: (typeof userStatus.list)['']): void => {
+ setStatus({ status: status.statusType, message: !isDefaultStatus(status.id) ? status.name : '' });
  void callbacks.run('userStatusManuallySet', status);
  };
 
@@ -64,7 +64,7 @@ export const useStatusItems = (user: IUser): GenericMenuItemProps[] => {
  id: status.id,
  status: <UserStatus status={modifier} />,
  content: <MarkdownText content={name} parseEmoji={true} variant='inline' />,
- onClick: () => setStatus(status),
+ onClick: () => setStatusAction(status),
  disabled: presenceDisabled,
  };
  });

apps/meteor/client/startup/iframeCommands.ts

@@ -5,7 +5,7 @@ import { Meteor } from 'meteor/meteor';
 import { ServiceConfiguration } from 'meteor/service-configuration';
 
 import { settings } from '../../app/settings/client';
-import { AccountBox } from '../../app/ui-utils/client';
+import { AccountBox } from '../../app/ui-utils/client/lib/AccountBox';
 import { sdk } from '../../app/utils/client/lib/SDKClient';
 import { callbacks } from '../../lib/callbacks';
 import { capitalize, ltrim, rtrim } from '../../lib/utils/stringUtils';