feat(PHP, TS) Apply the the code allow-admin-delegation-stable21 branch for stable23

I transposed the code from the allow-admin-delegation-stable21 branch to allow-admin-delegation-stable23

Signed-off-by: Baptiste Fotia <fotia.baptiste@arawa.fr>
Signed-off-by: Baptiste Fotia <fotia.baptiste@hotmail.com>

3 files changed, 137 insertions, 2 deletions

diff --git a/src/settings/Api.ts b/src/settings/Api.ts
index 3850cb17..0b094f94 100644
--- a/src/settings/Api.ts
+++ b/src/settings/Api.ts
@@ -43,10 +43,35 @@ export class Api {
 		return $.getJSON(this.getUrl('folders'))
 			.then((data: OCSResult<Folder[]>) => Object.keys(data.ocs.data).map(id => data.ocs.data[id]));
 	}
-
+	// Returns all NC groups
 	listGroups(): Thenable<Group[]> {
 		return $.getJSON(this.getUrl('delegation/groups'))
-			.then((data: OCSResult<Group[]>) => data.ocs.data);
+			.then((data: OCSResult<Group[]>) => {
+				// No need to present the admin group as it is automaticaly added
+				console.debug('groups before filter', data.ocs.data)
+				const groups = data.ocs.data.filter(g => g.id !== 'admin')
+				console.debug('groups after filter', groups)
+				return groups
+			});
+	}
+
+	// Returns all groups that have been granted delegated admin rights on groupfolders
+	listDelegatedAdmins(): Thenable<Group[]> {
+		return $.getJSON(this.getUrl('delegation/admins'))
+			.then((data: OCSResult<Group[]>) => {
+				// The admin group is always there. We don't want the user to remove it
+				const groups = data.ocs.data.filter(g => g.id !== 'admin')
+				return groups
+			})
+	}
+
+	// Updates the list of groups that have been granted delegated admin rights on groupfolders
+	updateDelegatedAdminGroups(groups: Group[]): Thenable<void> {
+		let newGroups = groups.map(g => g.id);
+		// The admin group shall always be granted delegation rights
+		newGroups.push('admin')
+		return $.post(this.getUrl('delegation/admins'), { groups: JSON.stringify(newGroups) }, null, 'json')
+			.then((data) => data);
 	}
 
 	createFolder(mountPoint: string): Thenable<number> {
diff --git a/src/settings/App.tsx b/src/settings/App.tsx
index 3bb93169..f280ba92 100644
--- a/src/settings/App.tsx
+++ b/src/settings/App.tsx
@@ -10,6 +10,7 @@ import {SortArrow} from "./SortArrow";
 import FlipMove from "react-flip-move";
 import AsyncSelect from 'react-select/async'
 import Thenable = JQuery.Thenable;
+import GroupSelect from './GroupSelect';
 
 const defaultQuotaOptions = {
 	'1 GB': 1073741274,
@@ -21,6 +22,7 @@ const defaultQuotaOptions = {
 export type SortKey = 'mount_point' | 'quota' | 'groups' | 'acl';
 
 export interface AppState {
+	delegatedAdminGroups: Group[],
 	folders: Folder[];
 	groups: Group[],
 	newMountPoint: string;
@@ -36,6 +38,7 @@ export class App extends Component<{}, AppState> implements OC.Plugin<OC.Search.
 	api = new Api();
 
 	state: AppState = {
+		delegatedAdminGroups: [],
 		folders: [],
 		groups: [],
 		newMountPoint: '',
@@ -55,6 +58,7 @@ export class App extends Component<{}, AppState> implements OC.Plugin<OC.Search.
 			this.setState({groups});
 		});
 		OC.Plugins.register('OCA.Search.Core', this);
+		console.log('this.state.groups', this.state.groups)
 	}
 
 	createRow = (event: FormEvent) => {
@@ -262,10 +266,22 @@ export class App extends Component<{}, AppState> implements OC.Plugin<OC.Search.
 				</tr>
 			});
 
+		console.debug('render - this.state.groups', this.state.groups)
 		return <div id="groupfolders-react-root"
 					onClick={() => {
 						this.setState({editingGroup: 0, editingMountPoint: 0})
 					}}>
+			<div id="groupfolders-admin-delegation">
+				<h3>{ t('groupfolders', 'Group folder admin delegation') }</h3>
+				<em>{ t('groupfolders', 'Nextcloud allows you to delegate the administration of groupfolders to non-admin users.') }</em>
+				<br/>
+				<em>{ t('groupfolders', "Specify hereunder the groups that allowed to manage groupfolders and use its API's.") }</em>
+				<br/>
+			</div>
+			<GroupSelect
+				groups={this.state.groups}
+				allGroups={this.state.groups}
+				delegatedAdminGroups={this.state.delegatedAdminGroups} />
 			<table>
 				<thead>
 				<tr>
diff --git a/src/settings/GroupSelect.tsx b/src/settings/GroupSelect.tsx
new file mode 100644
index 00000000..4431adbc
--- /dev/null
+++ b/src/settings/GroupSelect.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Select from 'react-select';
+import {getCurrentUser} from '@nextcloud/auth';
+import {Component} from 'react';
+import {Group, Api} from './Api';
+
+interface GroupSelectProps {
+	groups: Group[],
+	allGroups: Group[],
+	delegatedAdminGroups: Group[],
+}
+
+class GroupSelect extends Component<GroupSelectProps> {
+
+	state: GroupSelectProps = {
+		groups: [],
+		allGroups: [],
+		delegatedAdminGroups: [],
+	}
+
+	constructor (props) {
+		super(props)
+		this.state.groups = props.groups
+		this.state.allGroups = props.allGroups
+		this.state.delegatedAdminGroups = props.delegatedAdminGroups
+	}
+
+	api = new Api()
+
+	componentDidMount() {
+		this.api.listGroups().then((groups) => {
+			this.setState({groups});
+		});
+		this.api.listDelegatedAdmins().then((groups) => {
+			this.setState({delegatedAdminGroups: groups});
+		});
+	}
+
+	updateDelegatedAdminGroups(options: {value: string, label: string}[]): void {
+		if (this.state.groups !== undefined) {
+			const groups = options.map(option => {
+				return this.state.groups.filter(g => g.id === option.value)[0];
+			});
+			this.setState({delegatedAdminGroups: groups}, () => {
+				this.api.updateDelegatedAdminGroups(this.state.delegatedAdminGroups);
+			});			
+		}
+	}
+
+	render () {
+		const options = this.state.groups.map(group => {
+			return {
+				value: group.id,
+				label: group.displayname
+			};
+		});
+
+		return <Select
+			onChange={ this.updateDelegatedAdminGroups.bind(this) }
+			isDisabled={getCurrentUser() ? !getCurrentUser()!.isAdmin : true}
+			isMulti
+			value={this.state.delegatedAdminGroups.map(group => {
+				return {
+					value: group.id,
+					label: group.displayname
+				};
+			})}
+			className="delegated-admins-select"
+			options={options}
+			placeholder={t('groupfolders', 'Add group')}
+			styles={{
+				input: (provided) => ({
+					...provided,
+					height: 30
+				}),
+				control: (provided) => ({
+					...provided,
+					backgroundColor: 'var(--color-main-background)'
+				}),
+				menu: (provided) => ({
+					...provided,
+					backgroundColor: 'var(--color-main-background)',
+					borderColor: '#888'
+				})
+			}}
+		/>
+	}
+}
+
+// function GroupSelectFunc({allGroups, delegatedAdminGroups, onChange}: GroupSelectProps) {
+
+// }
+
+export default GroupSelect
\ No newline at end of file