[FIX] Integration section crashing opening in My Account (#24068)

client/contexts/ServerContext/methods.ts

@@ -1,3 +1,5 @@
+import type { DeleteWriteOpResultObject } from 'mongodb';
+
 import { IRoom } from '../../../definition/IRoom';
 import { IUser } from '../../../definition/IUser';
 import { FollowMessageMethod } from './methods/followMessage';
@@ -107,7 +109,7 @@ export type ServerMethods = {
 	'refreshOAuthService': (...args: any[]) => any;
 	'registerUser': (...args: any[]) => any;
 	'removeOAuthService': (...args: any[]) => any;
-	'removeWebdavAccount': (...args: any[]) => any;
+	'removeWebdavAccount': (accountId: string) => DeleteWriteOpResultObject;
 	'removeCannedResponse': (...args: any[]) => any;
 	'replayOutgoingIntegration': (...args: any[]) => any;
 	'requestDataDownload': (...args: any[]) => any;

client/views/account/AccountIntegrationsPage.tsx

@@ -1,7 +1,8 @@
-import { Box, Select, Field, Button } from '@rocket.chat/fuselage';
-import React, { useMemo, useCallback } from 'react';
+import { Box, Select, SelectOptions, Field, Button } from '@rocket.chat/fuselage';
+import React, { useMemo, useCallback, ReactElement } from 'react';
 
 import { WebdavAccounts } from '../../../app/models/client';
+import { IWebdavAccount } from '../../../definition/IWebdavAccount';
 import Page from '../../components/Page';
 import { useMethod } from '../../contexts/ServerContext';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
@@ -9,33 +10,37 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useForm } from '../../hooks/useForm';
 import { useReactiveValue } from '../../hooks/useReactiveValue';
 
-const getWebdavAccounts = () => WebdavAccounts.find().fetch();
+type WebdavAccountIntegration = Omit<IWebdavAccount, 'userId' | 'password' | '_updatedAt'>;
 
-const getServerName = ({ name, server_url, username }) =>
-	name || `${username}@${server_url.replace(/^https?\:\/\//i, '')}`;
+const getWebdavAccounts = (): Array<WebdavAccountIntegration> => WebdavAccounts.find().fetch();
 
-const AccountIntegrationsPage = () => {
+const getServerName = ({
+	name,
+	serverURL,
+	username,
+}: Omit<WebdavAccountIntegration, '_id'>): string =>
+	name || `${username}@${serverURL?.replace(/^https?\:\/\//i, '')}`;
+
+const AccountIntegrationsPage = (): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
-
 	const accounts = useReactiveValue(getWebdavAccounts);
-
-	const { values, handlers } = useForm({ selected: [] });
-
-	const { selected } = values;
-	const { handleSelected } = handlers;
-
 	const removeWebdavAccount = useMethod('removeWebdavAccount');
 
-	const options = useMemo(
+	const {
+		values: { selected },
+		handlers: { handleSelected },
+	} = useForm({ selected: [] });
+
+	const options: SelectOptions = useMemo(
 		() => accounts.map(({ _id, ...current }) => [_id, getServerName(current)]),
 		[accounts],
 	);
 
 	const handleClickRemove = useCallback(() => {
 		try {
-			removeWebdavAccount(selected);
-			dispatchToastMessage({ type: 'success', message: t('webdav-account-removed') });
+			removeWebdavAccount(selected as string);
+			dispatchToastMessage({ type: 'success', message: t('Webdav_account_removed') });
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
@@ -52,7 +57,7 @@ const AccountIntegrationsPage = () => {
 							<Select
 								options={options}
 								onChange={handleSelected}
-								value={selected}
+								value={selected as string}
 								placeholder={t('Select_an_option')}
 							/>
 							<Button primary danger onClick={handleClickRemove}>

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -4663,6 +4663,7 @@
   "Webdav_Password": "WebDAV Password",
   "Webdav_Server_URL": "WebDAV Server Access URL",
   "Webdav_Username": "WebDAV Username",
+  "Webdav_account_removed": "WebDAV account removed", 
   "webdav-account-saved": "WebDAV account saved",
   "webdav-account-updated": "WebDAV account updated",
   "Webhook_Details": "WebHook Details",