Chore: Rewrite AddUsers to TS (#25830)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. 
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Douglas Fabris <[email protected]>
Co-authored-by: Yash Rajpal <[email protected]>

apps/meteor/client/components/VerticalBar/VerticalBarBack.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, memo, ComponentProps } from 'react';
+
+import VerticalBarAction from './VerticalBarAction';
+
+type VerticalBarBackProps = Partial<ComponentProps<typeof VerticalBarAction>>;
+
+const VerticalBarBack = (props: VerticalBarBackProps): ReactElement => {
+	const t = useTranslation();
+	return <VerticalBarAction {...props} title={t('Back')} name='arrow-back' />;
+};
+
+export default memo(VerticalBarBack);

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

@@ -1,7 +1,7 @@
 import VerticalBar from './VerticalBar';
 import VerticalBarAction from './VerticalBarAction';
-import VerticalBarActionBack from './VerticalBarActionBack';
 import VerticalBarActions from './VerticalBarActions';
+import VerticalBarBack from './VerticalBarBack';
 import VerticalBarButton from './VerticalBarButton';
 import VerticalBarClose from './VerticalBarClose';
 import VerticalBarContent from './VerticalBarContent';
@@ -26,5 +26,5 @@ export default Object.assign(VerticalBar, {
 	ScrollableContent: VerticalBarScrollableContent,
 	Skeleton: VerticalBarSkeleton,
 	Button: VerticalBarButton,
-	Back: VerticalBarActionBack,
+	Back: VerticalBarBack,
 });

apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx

@@ -17,5 +17,5 @@ export default {
 export const Default: ComponentStory<typeof AddUsers> = (args) => <AddUsers {...args} />;
 Default.storyName = 'AddUsers';
 Default.args = {
-	value: 'rocket.cat',
+	users: ['rocket.cat'],
 };

apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js → apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.tsx

@@ -1,11 +1,20 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Field, Button } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import UserAutoCompleteMultiple from '../../../../../components/UserAutoCompleteMultiple';
 import VerticalBar from '../../../../../components/VerticalBar';
 
-const AddUsers = ({ onClickClose, onClickBack, onClickSave, value, onChange }) => {
+type AddUsersProps = {
+	onClickClose?: () => void;
+	onClickBack?: () => void;
+	onClickSave: () => Promise<void>;
+	users: IUser['username'][];
+	onChange: (value: IUser['username'][], action?: string) => void;
+};
+
+const AddUsers = ({ onClickClose, onClickBack, onClickSave, users, onChange }: AddUsersProps): ReactElement => {
 	const t = useTranslation();
 
 	return (
@@ -18,11 +27,11 @@ const AddUsers = ({ onClickClose, onClickBack, onClickSave, value, onChange }) =
 			<VerticalBar.ScrollableContent>
 				<Field>
 					<Field.Label flexGrow={0}>{t('Choose_users')}</Field.Label>
-					<UserAutoCompleteMultiple value={value} onChange={onChange} placeholder={t('Choose_users')} />
+					<UserAutoCompleteMultiple value={users} onChange={onChange} placeholder={t('Choose_users')} />
 				</Field>
 			</VerticalBar.ScrollableContent>
 			<VerticalBar.Footer>
-				<Button primary disabled={!value || value.length === 0} onClick={onClickSave}>
+				<Button primary disabled={!users || users.length === 0} onClick={onClickSave}>
 					{t('Add_users')}
 				</Button>
 			</VerticalBar.Footer>

apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js → apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.tsx

@@ -1,20 +1,31 @@
+import { IRoom, IUser } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { useForm } from '../../../../../hooks/useForm';
 import { useTabBarClose } from '../../../providers/ToolboxProvider';
 import AddUsers from './AddUsers';
 
-const AddUsersWithData = ({ rid, onClickBack, reload }) => {
+type AddUsersWithDataProps = {
+	rid: IRoom['_id'];
+	onClickBack: () => void;
+	reload: () => void;
+};
+
+type AddUsersInitialProps = {
+	users: IUser['username'][];
+};
+
+const AddUsersWithData = ({ rid, onClickBack, reload }: AddUsersWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const onClickClose = useTabBarClose();
 	const saveAction = useMethod('addUsersToRoom');
 
-	const { values, handlers } = useForm({ users: [] });
-	const { users } = values;
+	const { values, handlers } = useForm({ users: [] as IUser['username'][] });
+	const { users } = values as AddUsersInitialProps;
 	const { handleUsers } = handlers;
 
 	const onChangeUsers = useMutableCallback((value, action) => {
@@ -38,7 +49,7 @@ const AddUsersWithData = ({ rid, onClickBack, reload }) => {
 		}
 	});
 
-	return <AddUsers onClickClose={onClickClose} onClickBack={onClickBack} onClickSave={handleSave} value={users} onChange={onChangeUsers} />;
+	return <AddUsers onClickClose={onClickClose} onClickBack={onClickBack} onClickSave={handleSave} users={users} onChange={onChangeUsers} />;
 };
 
 export default AddUsersWithData;