[FIX] AccountBox checks for condition

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

@@ -1,23 +1,31 @@
-import { IUActionButtonWhen, IUIActionButton } from '@rocket.chat/apps-engine/definition/ui/IUIActionButtonDescriptor';
+import { IUIActionButton, IUActionButtonWhen } from '@rocket.chat/apps-engine/definition/ui/IUIActionButtonDescriptor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import { Meteor } from 'meteor/meteor';
 
 import { SideNav } from './SideNav';
 import { applyDropdownActionButtonFilters } from '../../../ui-message/client/actionButtons/lib/applyButtonFilters';
 
-export interface IAccountBoxItem extends Omit<IUIActionButton, 'when'> {
+export interface IAppAccountBoxItem extends IUIActionButton {
 	name: string;
 	icon?: string;
 	href?: string;
 	sideNav?: string;
 	isAppButtonItem?: boolean;
-	subItems?: [IAccountBoxItem];
+	subItems?: [IAppAccountBoxItem];
 	when?: Omit<IUActionButtonWhen, 'roomTypes' | 'messageActionContext'>;
 }
 
+type AccountBoxItem = {
+	name: string;
+	icon: string;
+	href: string;
+	sideNav?: string;
+	condition: () => boolean;
+};
+
 export class AccountBoxBase {
-	private items = new ReactiveVar([]);
+	private items = new ReactiveVar<IAppAccountBoxItem[]>([]);
 
 	private status = 0;
 
@@ -48,25 +56,31 @@ export class AccountBoxBase {
 		this.status = 0;
 	}
 
-	public async addItem(newItem: IAccountBoxItem): Promise<void> {
+	public async addItem(newItem: IAppAccountBoxItem): Promise<void> {
 		Tracker.nonreactive(() => {
 			const actual = this.items.get();
-			actual.push(newItem as never);
+			actual.push(newItem);
 			this.items.set(actual);
 		});
 	}
 
-	public async deleteItem(item: IAccountBoxItem): Promise<void> {
+	public async deleteItem(item: IAppAccountBoxItem): Promise<void> {
 		Tracker.nonreactive(() => {
 			const actual = this.items.get();
-			const itemIndex = actual.findIndex((actualItem: IAccountBoxItem) => actualItem.appId === item.appId);
+			const itemIndex = actual.findIndex((actualItem: IAppAccountBoxItem) => actualItem.appId === item.appId);
 			actual.splice(itemIndex, 1);
 			this.items.set(actual);
 		});
 	}
 
-	public getItems(): IAccountBoxItem[] {
-		return this.items.get().filter((item: IAccountBoxItem) => applyDropdownActionButtonFilters(item));
+	public getItems(): IAppAccountBoxItem[] {
+		return this.items.get().filter((item: IAppAccountBoxItem | AccountBoxItem) => {
+			if ('condition' in item) {
+				return item.condition();
+			}
+
+			return applyDropdownActionButtonFilters(item);
+		});
 	}
 }
 

apps/meteor/client/sidebar/header/UserDropdown.tsx

@@ -8,7 +8,7 @@ import React, { ReactElement } from 'react';
 
 import { triggerActionButtonAction } from '../../../app/ui-message/client/ActionManager';
 import { AccountBox, SideNav } from '../../../app/ui-utils/client';
-import { IAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import { IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
 import { userStatus } from '../../../app/user-status/client';
 import { callbacks } from '../../../lib/callbacks';
 import MarkdownText from '../../components/MarkdownText';
@@ -105,7 +105,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 
 	const accountBoxItems = useReactiveValue(getItems);
 
-	const appBoxItems = (): IAccountBoxItem[] => accountBoxItems.filter((item) => item.isAppButtonItem);
+	const appBoxItems = (): IAppAccountBoxItem[] => accountBoxItems.filter((item) => item.isAppButtonItem);
 
 	return (
 		<Box display='flex' flexDirection='column' w={!isMobile ? '244px' : undefined}>