Rewrite: My Account > Integrations rewritten

app/ui-account/client/index.js

@@ -1,4 +1,2 @@
-import './accountIntegrations.html';
 import './avatar/avatar.html';
-import './accountIntegrations';
 import './avatar/avatar';

client/account/AccountIntegrationsPage.js

@@ -0,0 +1,56 @@
+import React, { useMemo, useCallback } from 'react';
+import { Box, Select, Field, Button } from '@rocket.chat/fuselage';
+
+import { useReactiveValue } from '../hooks/useReactiveValue';
+import { useTranslation } from '../contexts/TranslationContext';
+import { useMethod } from '../contexts/ServerContext';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
+import { WebdavAccounts } from '../../app/models';
+import { useForm } from '../hooks/useForm';
+import Page from '../components/basic/Page';
+
+const getWebdavAccounts = () => WebdavAccounts.find().fetch();
+
+const getServerName = ({ name, server_url, username }) => name || `${ username }@${ server_url.replace(/^https?\:\/\//i, '') }`;
+
+const AccountIntegrationsPage = () => {
+	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(() => accounts.map(({ _id, ...current }) => [_id, getServerName(current)]), [accounts]);
+
+	const handleClickRemove = useCallback(() => {
+		try {
+			removeWebdavAccount(selected);
+			dispatchToastMessage({ type: 'success', message: t('webdav-account-removed') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [dispatchToastMessage, removeWebdavAccount, selected, t]);
+
+	return <Page>
+		<Page.Header title={t('Integrations')} />
+		<Page.ScrollableContentWithShadow>
+			<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Field>
+					<Field.Label>{t('WebDAV_Accounts')}</Field.Label>
+					<Field.Row>
+						<Select options={options} onChange={handleSelected} value={selected} placeholder={t('Select_an_option')}/>
+						<Button primary danger onClick={handleClickRemove}>{t('Remove')}</Button>
+					</Field.Row>
+				</Field>
+			</Box>
+		</Page.ScrollableContentWithShadow>
+	</Page>;
+};
+
+export default AccountIntegrationsPage;

client/account/AccountRoute.js

@@ -1,10 +1,12 @@
 import React, { useEffect } from 'react';
 
 import { SideNav } from '../../app/ui-utils';
-import NotAuthorizedPage from '../components/NotAuthorizedPage';
+import { useSetting } from '../contexts/SettingsContext';
 import { usePermission } from '../contexts/AuthorizationContext';
 import { useRouteParameter, useRoute } from '../contexts/RouterContext';
+import NotAuthorizedPage from '../components/NotAuthorizedPage';
 import AccountProfilePage from './AccountProfilePage';
+import AccountIntegrationsPage from './AccountIntegrationsPage';
 import AccountPreferencesPage from './preferences/AccountPreferencesPage';
 import AccountSecurityPage from './security/AccountSecurityPage';
 import AccountTokensPage from './tokens/AccountTokensPage';
@@ -21,6 +23,7 @@ const AccountRoute = () => {
 		SideNav.openFlex();
 	});
 
+	const webdavEnabled = useSetting('Webdav_Integration_Enabled');
 	const canCreateTokens = usePermission('create-personal-access-tokens');
 
 	if (page === 'profile') {
@@ -35,6 +38,14 @@ const AccountRoute = () => {
 		return <AccountSecurityPage />;
 	}
 
+	if (page === 'integrations') {
+		if (!webdavEnabled) {
+			return <NotAuthorizedPage />;
+		}
+
+		return <AccountIntegrationsPage />;
+	}
+
 	if (page === 'tokens') {
 		if (!canCreateTokens) {
 			return <NotAuthorizedPage />;