fix(eslint): Also check .ts and .tsx files

package.json

@@ -4,8 +4,8 @@
     "build": "NODE_ENV=production webpack --progress --config webpack.js",
     "dev": "NODE_ENV=development webpack --progress --config webpack.js",
     "watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
-    "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "lint": "eslint --ext .js,.vue,.tsx,.ts src",
+    "lint:fix": "eslint --ext .js,.vue,.tsx,.ts src --fix",
     "stylelint": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue",
     "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix",
     "cypress": "npm run cypress:e2e",

src/settings/App.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 import { Component, FormEvent } from 'react'
 
-import { Api, Circle, Folder, Group, OCSGroup, OCSUser } from './Api'
+import { Api, Circle, Folder, Group, ManageRuleProps } from './Api'
 import { FolderGroups } from './FolderGroups'
 import { QuotaSelect } from './QuotaSelect'
 import './App.scss'
@@ -45,7 +45,7 @@ export interface AppState {
 	checkAppsInstalled: boolean;
 }
 
-export class App extends Component<{}, AppState> implements OC.Plugin<OC.Search.Core> {
+export class App extends Component<unknown, AppState> implements OC.Plugin<OC.Search.Core> {
 
 	api = new Api()
 
@@ -367,23 +367,14 @@ export class App extends Component<{}, AppState> implements OC.Plugin<OC.Search.
 interface ManageAclSelectProps {
 	folder: Folder;
 	onChange: (type: string, id: string, manageAcl: boolean) => void;
-	onSearch: (name: string) => Thenable<{ groups: OCSGroup[]; users: OCSUser[]; }>;
+	onSearch: (name: string) => Thenable<{ groups: ManageRuleProps[]; users: ManageRuleProps[]; }>;
 }
 
-/**
- *
- * @param root0
- * @param root0.onChange
- * @param root0.onSearch
- * @param root0.folder
- */
+// eslint-disable-next-line jsdoc/require-jsdoc
 function ManageAclSelect({ onChange, onSearch, folder }: ManageAclSelectProps) {
-	const handleSearch = (inputValue: string) => {
-		return new Promise<any>(resolve => {
-			onSearch(inputValue).then((result) => {
-				resolve([...result.groups, ...result.users])
-			})
-		})
+	const handleSearch = async (inputValue: string) => {
+		const result = await onSearch(inputValue)
+		return [...result.groups, ...result.users]
 	}
 
 	const typeLabel = (item) => {

src/settings/FolderGroups.tsx

@@ -10,6 +10,7 @@ import './FolderGroups.scss'
 import { Circle, Group } from './Api'
 import { loadState } from '@nextcloud/initial-state'
 
+// eslint-disable-next-line jsdoc/require-jsdoc
 function hasPermissions(value: number, check: number): boolean {
 	return (value & check) === check
 }
@@ -21,11 +22,12 @@ export interface FolderGroupsProps {
 	onAddGroup: (name: string) => void;
 	removeGroup: (name: string) => void;
 	edit: boolean;
-	showEdit: (event: SyntheticEvent<any>) => void;
+	showEdit: (event: SyntheticEvent<unknown>) => void;
 	onSetPermissions: (name: string, permissions: number) => void;
 }
 
-export function FolderGroups({groups, allGroups = [], allCircles = [], onAddGroup, removeGroup, edit, showEdit, onSetPermissions}: FolderGroupsProps) {
+// eslint-disable-next-line jsdoc/require-jsdoc
+export function FolderGroups({ groups, allGroups = [], allCircles = [], onAddGroup, removeGroup, edit, showEdit, onSetPermissions }: FolderGroupsProps) {
 	const isCirclesEnabled = loadState('groupfolders', 'isCirclesEnabled', false)
 	const groupHeader = isCirclesEnabled
 		? t('groupfolders', 'Group or team')
@@ -44,7 +46,7 @@ export function FolderGroups({groups, allGroups = [], allCircles = [], onAddGrou
 		const setPermissions = (change: number, groupId: string): void => {
 			const newPermissions = groups[groupId] ^ change
 			onSetPermissions(groupId, newPermissions)
-		};
+		}
 
 		const rows = Object.keys(groups).map((groupId, index) => {
 			const permissions = groups[groupId]
@@ -71,28 +73,27 @@ export function FolderGroups({groups, allGroups = [], allCircles = [], onAddGrou
 			</tr>
 		})
 
-
 		return <table className="group-edit"
 					  onClick={event => event.stopPropagation()}>
 			<thead>
-			<tr>
-				<th>{groupHeader}</th>
-				<th>Write</th>
-				<th>Share</th>
-				<th>Delete</th>
-				<th/>
-			</tr>
+				<tr>
+					<th>{groupHeader}</th>
+					<th>Write</th>
+					<th>Share</th>
+					<th>Delete</th>
+					<th/>
+				</tr>
 			</thead>
 			<tbody>
-			{rows}
-			<tr>
-				<td colSpan={5}>
-					<AdminGroupSelect
-						allGroups={allGroups.filter(i => !groups[i.gid])}
-						allCircles={allCircles.filter(i => !groups[i.singleId])}
-						onChange={onAddGroup}/>
-				</td>
-			</tr>
+				{rows}
+				<tr>
+					<td colSpan={5}>
+						<AdminGroupSelect
+							allGroups={allGroups.filter(i => !groups[i.gid])}
+							allCircles={allCircles.filter(i => !groups[i.singleId])}
+							onChange={onAddGroup}/>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	} else {
@@ -115,7 +116,8 @@ interface CircleGroupSelectProps {
 	onChange: (name: string) => void;
 }
 
-function AdminGroupSelect({allGroups, allCircles, onChange}: CircleGroupSelectProps) {
+// eslint-disable-next-line jsdoc/require-jsdoc
+function AdminGroupSelect({ allGroups, allCircles, onChange }: CircleGroupSelectProps) {
 	const isCirclesEnabled = loadState('groupfolders', 'isCirclesEnabled', false)
 	const emptyGroups = isCirclesEnabled
 		? t('groupfolders', 'No other groups or teams available')
@@ -129,13 +131,13 @@ function AdminGroupSelect({allGroups, allCircles, onChange}: CircleGroupSelectPr
 	const groups = allGroups.map(group => {
 		return {
 			value: group.gid,
-			label: group.displayName
+			label: group.displayName,
 		}
 	})
 	const circles = allCircles.map(circle => {
 		return {
 			value: circle.singleId,
-			label: t('groupfolders', '{displayName} (team)', {...circle})
+			label: t('groupfolders', '{displayName} (team)', { ...circle }),
 		}
 	})
 	const options = [...groups, ...circles]
@@ -154,7 +156,7 @@ function AdminGroupSelect({allGroups, allCircles, onChange}: CircleGroupSelectPr
 			input: (provided) => ({
 				...provided,
 				height: 30,
-				color: 'var(--color-primary-element-text)'
+				color: 'var(--color-primary-element-text)',
 			}),
 			control: (provided) => ({
 				...provided,
@@ -163,12 +165,12 @@ function AdminGroupSelect({allGroups, allCircles, onChange}: CircleGroupSelectPr
 			menu: (provided) => ({
 				...provided,
 				backgroundColor: 'var(--color-main-background)',
-				borderColor: '#888'
+				borderColor: '#888',
 			}),
 			option: (provided, state) => ({
 				...provided,
-				backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent'
-			})
+				backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent',
+			}),
 		}}
 	/>
 }

src/settings/Nextcloud.d.ts

@@ -27,15 +27,15 @@ declare namespace OC {
 
 	interface Plugin<T> {
 		name?: string;
-		attach: (instance: T, options: any) => void;
-		detach?: (instance: T, options: any) => void;
+		attach: (instance: T, options: unknown) => void;
+		detach?: (instance: T, options: unknown) => void;
 	}
 
 	namespace Plugins {
-		function register(scope: string, plugin: OC.Plugin<any>): void;
-		function attach(targetName: string, targetObject: any, options: any): void;
-		function detach(targetName: string, targetObject: any, options: any): void;
-		function getPlugins(): OC.Plugin<any>[];
+		function register(scope: string, plugin: OC.Plugin<unknown>): void;
+		function attach(targetName: string, targetObject: unknown, options: unknown): void;
+		function detach(targetName: string, targetObject: unknown, options: unknown): void;
+		function getPlugins(): OC.Plugin<unknown>[];
 	}
 
 	namespace Search {
@@ -52,12 +52,12 @@ declare namespace OC {
 
 	function filePath(app: string, type: string, file: string): string;
 
-	const PERMISSION_CREATE = 4;
-	const PERMISSION_READ = 1;
-	const PERMISSION_UPDATE = 2;
-	const PERMISSION_DELETE = 8;
-	const PERMISSION_SHARE = 16;
-	const PERMISSION_ALL = 31;
+	const PERMISSION_CREATE = 4
+	const PERMISSION_READ = 1
+	const PERMISSION_UPDATE = 2
+	const PERMISSION_DELETE = 8
+	const PERMISSION_SHARE = 16
+	const PERMISSION_ALL = 31
 
 	const config: {
 		blacklist_files_regex: string;
@@ -66,11 +66,11 @@ declare namespace OC {
 		modRewriteWorking: boolean;
 		session_keepalive: boolean;
 		session_lifetime: boolean;
-		"sharing.maxAutocompleteResults": number;
-		"sharing.minSearchStringLength": number;
+		'sharing.maxAutocompleteResults': number;
+		'sharing.minSearchStringLength': number;
 		version: string;
 		versionString: string;
-	};
+	}
 }
 
 declare function t(app: string, string: string, vars?: { [key: string]: string }, count?: number, options?: EscapeOptions): string;

src/settings/QuotaSelect.tsx

@@ -2,10 +2,10 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import * as React from 'react';
-import {Component} from 'react';
-
-import './EditSelect.scss';
+import * as React from 'react'
+import { Component } from 'react'
+import { formatFileSize, parseFileSize } from '@nextcloud/files'
+import './EditSelect.scss'
 
 export interface QuotaSelectProps {
 	options: { [name: string]: number };
@@ -21,84 +21,79 @@ export interface QuotaSelectState {
 }
 
 export class QuotaSelect extends Component<QuotaSelectProps, QuotaSelectState> {
+
 	state: QuotaSelectState = {
 		options: {},
 		isEditing: false,
-		isValidInput: true
-	};
+		isValidInput: true,
+	}
 
 	constructor(props) {
-		super(props);
-		this.state.options = props.options;
+		super(props)
+		this.state.options = props.options
 		if (props.value >= 0) {
-			const valueText = OC.Util.humanFileSize(props.value);
-			this.state.options[valueText] = props.value;
+			const valueText = formatFileSize(props.value)
+			this.state.options[valueText] = props.value
 		}
 	}
 
 	onSelect = event => {
-		const value = event.target.value;
+		const value = event.target.value
 		if (value === 'other') {
-			this.setState({isEditing: true});
+			this.setState({ isEditing: true })
 		} else {
-			this.props.onChange(value);
+			this.props.onChange(value)
 		}
-	};
+	}
 
 	onEditedValue = (value) => {
-		const size = OC.Util.computerFileSize(value);
+		const size = parseFileSize(value)
 		if (!size) {
-			this.setState({isValidInput: false});
+			this.setState({ isValidInput: false })
 		} else {
-			this.setState({isValidInput: true, isEditing: false});
-			const options = this.state.options;
-			options[OC.Util.humanFileSize(size)] = size;
-			this.props.onChange(size);
+			this.setState({ isValidInput: true, isEditing: false })
+			const options = this.state.options
+			options[formatFileSize(size)] = size
+			this.props.onChange(size)
 		}
-	};
+	}
 
 	getUsedPercentage() {
 		if (this.props.value >= 0) {
-			return Math.min((this.props.size / this.props.value) * 100, 100);
+			return Math.min((this.props.size / this.props.value) * 100, 100)
 		} else {
-			const usedInGB = this.props.size / (10 * Math.pow(2, 30));
+			const usedInGB = this.props.size / (10 * Math.pow(2, 30))
 			// asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota
-			return 95 * (1 - (1 / (usedInGB + 1)));
+			return 95 * (1 - (1 / (usedInGB + 1)))
 		}
 	}
 
 	render() {
 		if (this.state.isEditing) {
 			return <input
 				onBlur={() => {
-					this.setState({isEditing: false})
+					this.setState({ isEditing: false })
 				}}
 				onKeyPress={(e) => {
-					(e.key === 'Enter' ? this.onEditedValue((e.target as HTMLInputElement).value) : null)
+					if (e.key === 'Enter') {
+						this.onEditedValue((e.target as HTMLInputElement).value)
+					}
 				}}
 				className={'editselect-input' + (this.state.isValidInput ? '' : ' error')}
 				autoFocus={true}/>
 		} else {
-			const usedPercentage = this.getUsedPercentage();
-			const humanSize = OC.Util.humanFileSize(this.props.size);
+			const usedPercentage = this.getUsedPercentage()
+			const humanSize = formatFileSize(this.props.size)
 			const options = Object.keys(this.state.options).map((key) => <option
-				value={this.state.options[key]} key={key}>{key}</option>);
+				value={this.state.options[key]} key={key}>{key}</option>)
 
 			return <div className="quotabar-holder">
 				<div className="quotabar"
-					 style={{width: usedPercentage + '%'}}/>
+					 style={{ width: usedPercentage + '%' }}/>
 				<select className="editselect"
-						onChange={this.onSelect}
-						ref={(ref) => {
-							ref && $(ref).tooltip({
-								title: t('settings', '{size} used', {size: humanSize}, 0, {escape: false}).replace('&lt;', '<'),
-								delay: {
-									show: 100,
-									hide: 0
-								}
-							});
-						}}
-						value={this.props.value}>
+					onChange={this.onSelect}
+					title={t('settings', '{size} used', { size: humanSize }, 0, { escape: false }).replace('&lt;', '<')}
+					value={this.props.value}>
 					{options}
 					<option value="other">
 						{t('groupfolders', 'Other …')}
@@ -107,4 +102,5 @@ export class QuotaSelect extends Component<QuotaSelectProps, QuotaSelectState> {
 			</div>
 		}
 	}
+
 }