[FIX] Not possible to deactivate users

apps/meteor/client/components/ConfirmOwnerChangeWarningModal.tsx → apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -1,26 +1,23 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC } from 'react';
+import React, { FC, ComponentProps } from 'react';
 
 import GenericModal from './GenericModal';
 import RawText from './RawText';
 
-type ConfirmOwnerChangeWarningModalProps = {
-	onConfirm: () => void;
-	onCancel: () => void;
-	shouldChangeOwner: Array<string>;
-	shouldBeRemoved: Array<string>;
-	contentTitle: string;
-	confirmLabel: string;
-};
+type ConfirmOwnerChangeModalProps = {
+	shouldChangeOwner: string[];
+	shouldBeRemoved: string[];
+	contentTitle?: string;
+} & Pick<ComponentProps<typeof GenericModal>, 'onConfirm' | 'onCancel' | 'confirmText'>;
 
-const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> = ({
-	onConfirm,
-	onCancel,
-	contentTitle = '',
-	confirmLabel = '',
+const ConfirmOwnerChangeModal: FC<ConfirmOwnerChangeModalProps> = ({
 	shouldChangeOwner,
 	shouldBeRemoved,
+	contentTitle,
+	confirmText,
+	onConfirm,
+	onCancel,
 }) => {
 	const t = useTranslation();
 
@@ -61,7 +58,7 @@ const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> =
 	}
 
 	return (
-		<GenericModal variant='danger' onClose={onCancel} onCancel={onCancel} confirmText={confirmLabel} onConfirm={onConfirm}>
+		<GenericModal variant='danger' onClose={onCancel} onCancel={onCancel} confirmText={confirmText} onConfirm={onConfirm}>
 			{contentTitle}
 
 			{changeOwnerRooms && (
@@ -78,4 +75,4 @@ const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> =
 	);
 };
 
-export default ConfirmOwnerChangeWarningModal;
+export default ConfirmOwnerChangeModal;

apps/meteor/client/views/InfoPanel/Action.tsx → apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx

@@ -1,7 +1,7 @@
 import { Icon, Button } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Action: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof Icon>['name']; label: string }> = ({
+const InfoPanelAction: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof Icon>['name']; label: string }> = ({
 	label,
 	icon,
 	...props
@@ -12,4 +12,4 @@ const Action: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof I
 	</Button>
 );
 
-export default Action;
+export default InfoPanelAction;

apps/meteor/client/views/InfoPanel/ActionGroup.tsx → apps/meteor/client/components/InfoPanel/InfoPanelActionGroup.tsx

@@ -1,12 +1,12 @@
 import { ButtonGroup } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-import Section from './Section';
+import Section from './InfoPanelSection';
 
-const ActionGroup: FC<ComponentProps<typeof ButtonGroup>> = (props) => (
+const InfoPanelActionGroup: FC<ComponentProps<typeof ButtonGroup>> = (props) => (
 	<Section>
 		<ButtonGroup flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center' {...props} />
 	</Section>
 );
 
-export default ActionGroup;
+export default InfoPanelActionGroup;

apps/meteor/client/components/InfoPanel/InfoPanelAvatar.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+import Section from './InfoPanelSection';
+
+const InfoPanelAvatar: FC = ({ children }) => (
+	<Section display='flex' justifyContent='center'>
+		{children}
+	</Section>
+);
+
+export default InfoPanelAvatar;

apps/meteor/client/components/InfoPanel/InfoPanelField.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const InfoPanelField: FC = ({ children }) => <Box mb='x16'>{children}</Box>;
+
+export default InfoPanelField;

apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const InfoPanelLabel: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x8' fontScale='p2m' color='default' {...props} />;
+
+export default InfoPanelLabel;

apps/meteor/client/components/InfoPanel/InfoPanelSection.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const InfoPanelSection: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x24' {...props} />;
+
+export default InfoPanelSection;

apps/meteor/client/views/InfoPanel/Text.tsx → apps/meteor/client/components/InfoPanel/InfoPanelText.tsx

@@ -6,8 +6,8 @@ const wordBreak = css`
 	word-break: break-word;
 `;
 
-const Text: FC<ComponentProps<typeof Box>> = (props) => (
-	<Box mb='x8' fontScale='p2' color='hint' withTruncatedText className={wordBreak} {...props} />
+const InfoPanelText: FC<ComponentProps<typeof Box>> = (props) => (
+	<Box mb='x8' fontScale='p2' color='hint' className={wordBreak} {...props} />
 );
 
-export default Text;
+export default InfoPanelText;

apps/meteor/client/views/InfoPanel/Title.tsx → apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx

@@ -1,18 +1,20 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC, ReactNode } from 'react';
 
-type TitleProps = {
+type InfoPanelTitleProps = {
 	title: string;
-	icon: ComponentProps<typeof Icon>['name'] | Exclude<ReactNode, string | {}>;
+	icon: ReactNode;
 };
 
-const Title: FC<TitleProps> = ({ title, icon }) => (
+const isValidIcon = (icon: ReactNode): icon is ComponentProps<typeof Icon>['name'] => typeof icon === 'string';
+
+const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
 	<Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
-		{typeof icon === 'string' ? icon && <Icon name={icon} size='x22' /> : icon}
+		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
 		<Box mis='x8' flexGrow={1} withTruncatedText>
 			{title}
 		</Box>
 	</Box>
 );
 
-export default Title;
+export default InfoPanelTitle;

apps/meteor/client/views/InfoPanel/RetentionPolicyCallout.tsx → apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx

@@ -12,7 +12,6 @@ type RetentionPolicyCalloutProps = {
 
 const RetentionPolicyCallout: FC<RetentionPolicyCalloutProps> = ({ filesOnlyDefault, excludePinnedDefault, maxAgeDefault }) => {
 	const t = useTranslation();
-
 	const time = useFormattedRelativeTime(maxAgeDefault * 1000 * 60 * 60 * 24);
 
 	return (

apps/meteor/client/components/InfoPanel/index.ts

@@ -0,0 +1,20 @@
+import InfoPanel from './InfoPanel';
+import InfoPanelAction from './InfoPanelAction';
+import InfoPanelActionGroup from './InfoPanelActionGroup';
+import InfoPanelAvatar from './InfoPanelAvatar';
+import InfoPanelField from './InfoPanelField';
+import InfoPanelLabel from './InfoPanelLabel';
+import InfoPanelSection from './InfoPanelSection';
+import InfoPanelText from './InfoPanelText';
+import InfoPanelTitle from './InfoPanelTitle';
+
+export default Object.assign(InfoPanel, {
+	Title: InfoPanelTitle,
+	Label: InfoPanelLabel,
+	Text: InfoPanelText,
+	Avatar: InfoPanelAvatar,
+	Field: InfoPanelField,
+	Action: InfoPanelAction,
+	Section: InfoPanelSection,
+	ActionGroup: InfoPanelActionGroup,
+});

apps/meteor/client/components/UserCard/UserCardRole.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode, ReactElement } from 'react';
 
 const UserCardRole = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box m='x2' fontScale='c2'>
-		<Tag disabled children={children} />
+		<Tag children={children} />
 	</Box>
 );
 

apps/meteor/client/components/UserCard/UserCardUsername.tsx

@@ -21,7 +21,7 @@ const UserCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: U
 		withTruncatedText
 		{...props}
 	>
-		{status}{' '}
+		{status}
 		<Box mis='x8' flexGrow={1} withTruncatedText>
 			{name}
 		</Box>

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.stories.tsx → apps/meteor/client/components/UserInfo/UserInfo.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import * as Status from '../../../../components/UserStatus';
-import VerticalBar from '../../../../components/VerticalBar';
+import * as Status from '../UserStatus';
+import VerticalBar from '../VerticalBar';
 import UserInfo from './UserInfo';
 
 export default {
@@ -21,10 +21,9 @@ export const Default = Template.bind({});
 Default.args = {
 	name: 'Guilherme Gazzo',
 	username: 'guilherme.gazzo',
-	customStatus: '🛴 currently working on User Card',
+	statusText: '🛴 currently working on User Card',
 	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	localTime: 'Local Time: 7:44 AM',
 	utcOffset: -3,
 	email: 'rocketchat@rocket.chat',
 	status: <Status.Offline />,
@@ -34,10 +33,9 @@ export const WithNickname = Template.bind({});
 WithNickname.args = {
 	name: 'Guilherme Gazzo',
 	username: 'guilherme.gazzo',
-	customStatus: '🛴 currently working on User Card',
+	statusText: '🛴 currently working on User Card',
 	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	localTime: 'Local Time: 7:44 AM',
 	utcOffset: -3,
 	email: 'rocketchat@rocket.chat',
 	status: <Status.Offline />,