From 8ae906eeb71ccdec9afb8ddf1abd11b72cb1fa28 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Fri, 17 Jul 2020 17:06:42 -0300
Subject: [PATCH] Account Integrations rewriten

---
 .../client/accountIntegrations.html           | 26 ---------
 app/ui-account/client/accountIntegrations.js  | 37 ------------
 app/ui-account/client/index.js                |  2 -
 client/account/AccountIntegrationsPage.js     | 56 +++++++++++++++++++
 client/account/AccountRoute.js                | 13 ++++-
 5 files changed, 68 insertions(+), 66 deletions(-)
 delete mode 100644 app/ui-account/client/accountIntegrations.html
 delete mode 100644 app/ui-account/client/accountIntegrations.js
 create mode 100644 client/account/AccountIntegrationsPage.js

diff --git a/app/ui-account/client/accountIntegrations.html b/app/ui-account/client/accountIntegrations.html
deleted file mode 100644
index ef894978795d..000000000000
--- a/app/ui-account/client/accountIntegrations.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<template name="accountIntegrations">
-	<section class="preferences-page preferences-page--new page-static page-settings">
-		{{> header sectionName="Integrations" fullpage=true}}
-
-		<div class="content">
-			<form id="integrations" autocomplete="off">
-				<div class="section">
-					<h1>{{_ "WebDAV"}}</h1>
-					<div class="section-content border-component-color">
-						<div class="input-line double-col">
-							<label for="webdav-accounts" class="setting-label">{{_ "WebDAV_Accounts"}}</label>
-							<div class="rc-select setting-field">
-								<select id="webdav-accounts" class="rc-select__element" style="text-transform: none" multiple>
-									{{#each webdavAccounts}}
-										<option value="{{this._id}}">{{getOptionValue this}}</option>
-									{{/each}}
-								</select>
-							</div>
-							<button class="rc-button rc-button--cancel setting-action webdav-account-remove"><span>{{_ "Remove"}}</span></button>
-						</div>
-					</div>
-				</div>
-			</form>
-		</div>
-	</section>
-</template>
diff --git a/app/ui-account/client/accountIntegrations.js b/app/ui-account/client/accountIntegrations.js
deleted file mode 100644
index a8d9d3916bcf..000000000000
--- a/app/ui-account/client/accountIntegrations.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Template } from 'meteor/templating';
-import toastr from 'toastr';
-
-import { WebdavAccounts } from '../../models';
-import { modal } from '../../ui-utils';
-import { t } from '../../utils';
-
-Template.accountIntegrations.helpers({
-	webdavAccounts() {
-		return WebdavAccounts.find().fetch();
-	},
-	getOptionValue(account) {
-		return account.name || `${ account.username }@${ account.server_url.replace(/^https?\:\/\//i, '') }`;
-	},
-});
-
-Template.accountIntegrations.events({
-	'click .webdav-account-remove'(e) {
-		e.preventDefault();
-		const selectEl = document.getElementById('webdav-accounts');
-		const { options } = selectEl;
-		const selectedOption = selectEl.value;
-		const optionIndex = Array.from(options).findIndex((option) => option.value === selectedOption);
-
-		Meteor.call('removeWebdavAccount', selectedOption, function(error) {
-			if (error) {
-				return toastr.error(t(error.error));
-			}
-
-			toastr.success(t('webdav-account-removed'));
-			modal.close();
-		});
-
-		selectEl.remove(optionIndex);
-	},
-});
diff --git a/app/ui-account/client/index.js b/app/ui-account/client/index.js
index 5ba00d4072a2..a04a7fe0abe3 100644
--- a/app/ui-account/client/index.js
+++ b/app/ui-account/client/index.js
@@ -1,6 +1,4 @@
-import './accountIntegrations.html';
 import './avatar/avatar.html';
 import './avatar/prompt.html';
-import './accountIntegrations';
 import './avatar/avatar';
 import './avatar/prompt';
diff --git a/client/account/AccountIntegrationsPage.js b/client/account/AccountIntegrationsPage.js
new file mode 100644
index 000000000000..ee0869f90236
--- /dev/null
+++ b/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;
diff --git a/client/account/AccountRoute.js b/client/account/AccountRoute.js
index a8b2a0cc955a..4112cd6b1ef2 100644
--- a/client/account/AccountRoute.js
+++ b/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 />;