--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import {
+ QueryFunctionContext,
+ useMutation,
+ useQueries,
+ useQueryClient,
+} from '@tanstack/react-query';
+import { range } from 'lodash';
+import { User } from '../../types/users';
+import {
+ CreateUserParams,
+ DeactivateUserParams,
+ SearchUsersParams,
+ UpdateUserParams,
+ createUser,
+ deactivateUser,
+ searchUsers,
+ updateUser,
+} from '../users';
+
+export function useUsersQueries(
+ searchParam: Omit<SearchUsersParams, 'p' | 'ps'>,
+ numberOfPages: number
+) {
+ type QueryKey = ['user', 'list', number, Omit<SearchUsersParams, 'p' | 'ps'>];
+ const results = useQueries({
+ queries: range(1, numberOfPages + 1).map((page: number) => ({
+ queryKey: ['user', 'list', page, searchParam],
+ queryFn: ({ queryKey: [_u, _l, page, searchParam] }: QueryFunctionContext<QueryKey>) =>
+ searchUsers({ ...searchParam, p: page }),
+ })),
+ });
+
+ return results.reduce(
+ (acc, { data, isLoading }) => ({
+ users: acc.users.concat(data?.users ?? []),
+ total: data?.paging.total,
+ isLoading: acc.isLoading || isLoading,
+ }),
+ { users: [] as User[], total: 0, isLoading: false }
+ );
+}
+
+export function useInvalidateUsersList() {
+ const queryClient = useQueryClient();
+
+ return () => queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
+}
+
+export function useCreateUserMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (data: CreateUserParams) => {
+ await createUser(data);
+ },
+ onSuccess() {
+ queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
+ },
+ });
+}
+
+export function useUpdateUserMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (data: UpdateUserParams) => {
+ await updateUser(data);
+ },
+ onSuccess() {
+ queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
+ },
+ });
+}
+
+export function useDeactivateUserMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (data: DeactivateUserParams) => {
+ await deactivateUser(data);
+ },
+ onSuccess() {
+ queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
+ },
+ });
+}
selected: boolean;
}
-export function getUserGroups(data: {
+export interface UserGroupsParams {
login: string;
p?: number;
ps?: number;
q?: string;
selected?: string;
-}): Promise<{ paging: Paging; groups: UserGroup[] }> {
+}
+
+export function getUserGroups(
+ data: UserGroupsParams
+): Promise<{ paging: Paging; groups: UserGroup[] }> {
return getJSON('/api/users/groups', data);
}
return getJSON('/api/users/identity_providers').catch(throwGlobalError);
}
-export function searchUsers(data: {
+export interface SearchUsersParams {
p?: number;
ps?: number;
q?: string;
lastConnectedBefore?: string;
slLastConnectedAfter?: string;
slLastConnectedBefore?: string;
-}): Promise<{ paging: Paging; users: User[] }> {
+}
+
+export function searchUsers(data: SearchUsersParams): Promise<{ paging: Paging; users: User[] }> {
data.q = data.q || undefined;
return getJSON('/api/users/search', data).catch(throwGlobalError);
}
-export function createUser(data: {
+export interface CreateUserParams {
email?: string;
local?: boolean;
login: string;
name: string;
password?: string;
scmAccount: string[];
-}): Promise<void | Response> {
+}
+
+export function createUser(data: CreateUserParams): Promise<void | Response> {
return post('/api/users/create', data);
}
-export function updateUser(data: {
+export interface UpdateUserParams {
email?: string;
login: string;
name?: string;
scmAccount: string[];
-}): Promise<{ user: User }> {
+}
+
+export function updateUser(data: UpdateUserParams): Promise<{ user: User }> {
return postJSON('/api/users/update', {
...data,
scmAccount: data.scmAccount.length > 0 ? data.scmAccount : '',
});
}
-export function deactivateUser(data: {
+export interface DeactivateUserParams {
login: string;
anonymize?: boolean;
-}): Promise<{ user: User }> {
+}
+
+export function deactivateUser(data: DeactivateUserParams): Promise<{ user: User }> {
return postJSON('/api/users/deactivate', data).catch(throwGlobalError);
}
import ConfigurationForm from './ConfigurationForm';
import GitHubConfigurationValidity from './GitHubConfigurationValidity';
import useGithubConfiguration, { GITHUB_JIT_FIELDS } from './hook/useGithubConfiguration';
-import { useCheckGitHubConfigQuery, useIdentityProvierQuery } from './queries/identity-provider';
+import { useCheckGitHubConfigQuery, useIdentityProviderQuery } from './queries/identity-provider';
interface GithubAuthenticationProps {
definitions: ExtendedSettingDefinition[];
export default function GithubAuthenticationTab(props: GithubAuthenticationProps) {
const { definitions } = props;
- const { data } = useIdentityProvierQuery();
+ const { data } = useIdentityProviderQuery();
const [showEditModal, setShowEditModal] = useState(false);
const [showConfirmProvisioningModal, setShowConfirmProvisioningModal] = useState(false);
SAML_GROUP_NAME,
SAML_SCIM_DEPRECATED,
} from './hook/useSamlConfiguration';
-import { useIdentityProvierQuery, useToggleScimMutation } from './queries/identity-provider';
+import { useIdentityProviderQuery, useToggleScimMutation } from './queries/identity-provider';
interface SamlAuthenticationProps {
definitions: ExtendedSettingDefinition[];
} = useSamlConfiguration(definitions);
const toggleScim = useToggleScimMutation();
- const { data } = useIdentityProvierQuery();
+ const { data } = useIdentityProviderQuery();
const { mutate: saveSetting } = useSaveValueMutation();
const hasDifferentProvider = data?.provider !== undefined && data.provider !== Provider.Scim;
import { Feature } from '../../../../../types/features';
import { SysInfoCluster } from '../../../../../types/types';
-export function useIdentityProvierQuery() {
+export function useIdentityProviderQuery() {
return useQuery(['identity_provider'], async () => {
const info = (await getSystemInfo()) as SysInfoCluster;
return { provider: info.System['External Users and Groups Provisioning'] };
import UserForm from './components/UserForm';
interface Props {
- onUpdateUsers: () => void;
manageProvider?: string;
}
/>
</Alert>
)}
- {openUserForm && (
- <UserForm onClose={() => setOpenUserForm(false)} onUpdateUsers={props.onUpdateUsers} />
- )}
+ {openUserForm && <UserForm onClose={() => setOpenUserForm(false)} />}
</div>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import { subDays, subSeconds } from 'date-fns';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Helmet } from 'react-helmet-async';
-import { getIdentityProviders, searchUsers } from '../../api/users';
+import { useUsersQueries } from '../../api/queries/users';
+import { getIdentityProviders } from '../../api/users';
import GitHubSynchronisationWarning from '../../app/components/GitHubSynchronisationWarning';
import HelpTooltip from '../../components/controls/HelpTooltip';
import ListFooter from '../../components/controls/ListFooter';
import DeferredSpinner from '../../components/ui/DeferredSpinner';
import { now, toISO8601WithOffsetString } from '../../helpers/dates';
import { translate } from '../../helpers/l10n';
-import { IdentityProvider, Paging } from '../../types/types';
-import { User } from '../../types/users';
+import { IdentityProvider } from '../../types/types';
import Header from './Header';
import UsersList from './UsersList';
import { USERS_ACTIVITY_OPTIONS, USER_INACTIVITY_DAYS_THRESHOLD } from './constants';
export default function UsersApp() {
const [identityProviders, setIdentityProviders] = useState<IdentityProvider[]>([]);
-
- const [loading, setLoading] = useState(true);
- const [paging, setPaging] = useState<Paging>();
- const [users, setUsers] = useState<User[]>([]);
-
+ const [numberOfPages, setNumberOfPages] = useState<number>(1);
const [search, setSearch] = useState('');
const [usersActivity, setUsersActivity] = useState<UserActivity>(UserActivity.AnyActivity);
const [managed, setManaged] = useState<boolean | undefined>(undefined);
- const manageProvider = useManageProvider();
-
const usersActivityParams = useMemo(() => {
const nowDate = now();
const nowDateMinus30Days = subDays(nowDate, USER_INACTIVITY_DAYS_THRESHOLD);
}
}, [usersActivity]);
- const fetchUsers = useCallback(async () => {
- setLoading(true);
- try {
- const { paging, users } = await searchUsers({
- q: search,
- managed,
- ...usersActivityParams,
- });
- setPaging(paging);
- setUsers(users);
- } finally {
- setLoading(false);
- }
- }, [search, managed, usersActivityParams]);
+ const { users, total, isLoading } = useUsersQueries(
+ {
+ q: search,
+ managed,
+ ...usersActivityParams,
+ },
+ numberOfPages
+ );
- const fetchMoreUsers = useCallback(async () => {
- if (!paging) {
- return;
- }
- setLoading(true);
- try {
- const { paging: nextPage, users: nextUsers } = await searchUsers({
- q: search,
- managed,
- ...usersActivityParams,
- p: paging.pageIndex + 1,
- });
- setPaging(nextPage);
- setUsers([...users, ...nextUsers]);
- } finally {
- setLoading(false);
- }
- }, [search, managed, usersActivityParams, paging, users]);
+ const manageProvider = useManageProvider();
useEffect(() => {
(async () => {
})();
}, []);
- useEffect(() => {
- fetchUsers();
- }, [fetchUsers]);
-
return (
<main className="page page-limited" id="users-page">
<Suggestions suggestions="users" />
<Helmet defer={false} title={translate('users.page')} />
- <Header onUpdateUsers={fetchUsers} manageProvider={manageProvider} />
+ <Header manageProvider={manageProvider} />
{manageProvider === Provider.Github && <GitHubSynchronisationWarning short />}
<div className="display-flex-justify-start big-spacer-bottom big-spacer-top">
<ManagedFilter
manageProvider={manageProvider}
- loading={loading}
+ loading={isLoading}
managed={managed}
- setManaged={setManaged}
+ setManaged={(m) => {
+ setManaged(m);
+ setNumberOfPages(1);
+ }}
/>
<SearchBox
id="users-search"
minLength={2}
- onChange={(search: string) => setSearch(search)}
+ onChange={(search: string) => {
+ setSearch(search);
+ setNumberOfPages(1);
+ }}
placeholder={translate('search.search_by_login_or_name')}
value={search}
/>
<Select
id="users-activity-filter"
className="input-large"
- isDisabled={loading}
+ isDisabled={isLoading}
onChange={(userActivity: LabelValueSelectOption<UserActivity>) => {
setUsersActivity(userActivity.value);
+ setNumberOfPages(1);
}}
options={USERS_ACTIVITY_OPTIONS}
isSearchable={false}
/>
</div>
</div>
- <DeferredSpinner loading={loading}>
+ <DeferredSpinner loading={isLoading}>
<UsersList
identityProviders={identityProviders}
- onUpdateUsers={fetchUsers}
- updateTokensCount={fetchUsers}
users={users}
manageProvider={manageProvider}
/>
</DeferredSpinner>
- {paging !== undefined && (
- <ListFooter
- count={users.length}
- loadMore={fetchMoreUsers}
- ready={!loading}
- total={paging.total}
- />
- )}
+
+ <ListFooter
+ count={users.length}
+ loadMore={() => setNumberOfPages((n) => n + 1)}
+ ready={!isLoading}
+ total={total}
+ />
</main>
);
}
interface Props {
identityProviders: IdentityProvider[];
- onUpdateUsers: () => void;
- updateTokensCount: (login: string, tokensCount: number) => void;
users: User[];
manageProvider: string | undefined;
}
-export default function UsersList({
- identityProviders,
- onUpdateUsers,
- updateTokensCount,
- users,
- manageProvider,
-}: Props) {
+export default function UsersList({ identityProviders, users, manageProvider }: Props) {
const userContext = React.useContext(CurrentUserContext);
const currentUser = userContext?.currentUser;
)}
isCurrentUser={isLoggedIn(currentUser) && currentUser.login === user.login}
key={user.login}
- onUpdateUsers={onUpdateUsers}
- updateTokensCount={updateTokensCount}
user={user}
manageProvider={manageProvider}
/>
*/
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { deactivateUser } from '../../../api/users';
+import { useDeactivateUserMutation } from '../../../api/queries/users';
import DocLink from '../../../components/common/DocLink';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import Checkbox from '../../../components/controls/Checkbox';
import Modal from '../../../components/controls/Modal';
+import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import { Alert } from '../../../components/ui/Alert';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { UserActive } from '../../../types/users';
export interface Props {
onClose: () => void;
- onUpdateUsers: () => void;
user: UserActive;
}
-interface State {
- submitting: boolean;
- anonymize: boolean;
-}
-
-export default class DeactivateForm extends React.PureComponent<Props, State> {
- mounted = false;
- state: State = { submitting: false, anonymize: false };
-
- componentDidMount() {
- this.mounted = true;
- }
+export default function DeactivateForm(props: Props) {
+ const { user } = props;
+ const [anonymize, setAnonymize] = React.useState(false);
- componentWillUnmount() {
- this.mounted = false;
- }
+ const { mutate: deactivateUser, isLoading } = useDeactivateUserMutation();
- handleAnonymize = (checked: boolean) => {
- this.setState({ anonymize: checked });
- };
-
- handleDeactivate = (event: React.SyntheticEvent<HTMLFormElement>) => {
+ const handleDeactivate = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
- this.setState({ submitting: true });
- deactivateUser({ login: this.props.user.login, anonymize: this.state.anonymize }).then(
- () => {
- this.props.onUpdateUsers();
- this.props.onClose();
- },
- () => {
- if (this.mounted) {
- this.setState({ submitting: false });
- }
+ deactivateUser(
+ { login: user.login, anonymize },
+ {
+ onSuccess: props.onClose,
}
);
};
- render() {
- const { user } = this.props;
- const { submitting, anonymize } = this.state;
-
- const header = translate('users.deactivate_user');
- return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
- <form autoComplete="off" id="deactivate-user-form" onSubmit={this.handleDeactivate}>
- <header className="modal-head">
- <h2>{header}</h2>
- </header>
- <div className="modal-body display-flex-column">
- {translateWithParameters('users.deactivate_user.confirmation', user.name, user.login)}
- <Checkbox
- id="delete-user"
- className="big-spacer-top"
- checked={anonymize}
- onCheck={this.handleAnonymize}
- >
- <label className="little-spacer-left" htmlFor="delete-user">
- {translate('users.delete_user')}
- </label>
- </Checkbox>
- {anonymize && (
- <Alert variant="warning" className="big-spacer-top">
- <FormattedMessage
- defaultMessage={translate('users.delete_user.help')}
- id="delete-user-warning"
- values={{
- link: (
- <DocLink to="/instance-administration/authentication/overview/">
- {translate('users.delete_user.help.link')}
- </DocLink>
- ),
- }}
- />
- </Alert>
- )}
- </div>
- <footer className="modal-foot">
- {submitting && <i className="spinner spacer-right" />}
- <SubmitButton className="js-confirm button-red" disabled={submitting}>
- {translate('users.deactivate')}
- </SubmitButton>
- <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
- {translate('cancel')}
- </ResetButtonLink>
- </footer>
- </form>
- </Modal>
- );
- }
+ const header = translate('users.deactivate_user');
+ return (
+ <Modal contentLabel={header} onRequestClose={props.onClose}>
+ <form autoComplete="off" id="deactivate-user-form" onSubmit={handleDeactivate}>
+ <header className="modal-head">
+ <h2>{header}</h2>
+ </header>
+ <div className="modal-body display-flex-column">
+ {translateWithParameters('users.deactivate_user.confirmation', user.name, user.login)}
+ <Checkbox
+ id="delete-user"
+ className="big-spacer-top"
+ checked={anonymize}
+ onCheck={(checked) => setAnonymize(checked)}
+ >
+ <label className="little-spacer-left" htmlFor="delete-user">
+ {translate('users.delete_user')}
+ </label>
+ </Checkbox>
+ {anonymize && (
+ <Alert variant="warning" className="big-spacer-top">
+ <FormattedMessage
+ defaultMessage={translate('users.delete_user.help')}
+ id="delete-user-warning"
+ values={{
+ link: (
+ <DocLink to="/instance-administration/authentication/overview/">
+ {translate('users.delete_user.help.link')}
+ </DocLink>
+ ),
+ }}
+ />
+ </Alert>
+ )}
+ </div>
+ <footer className="modal-foot">
+ {isLoading && <i className="spinner spacer-right" />}
+ <SubmitButton className="js-confirm button-red" disabled={isLoading}>
+ {translate('users.deactivate')}
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={props.onClose}>
+ {translate('cancel')}
+ </ResetButtonLink>
+ </footer>
+ </form>
+ </Modal>
+ );
}
*/
import { find, without } from 'lodash';
import * as React from 'react';
-import { getUserGroups, UserGroup } from '../../../api/users';
+import { useInvalidateUsersList } from '../../../api/queries/users';
import { addUserToGroup, removeUserFromGroup } from '../../../api/user_groups';
-import { ResetButtonLink } from '../../../components/controls/buttons';
+import { UserGroup, getUserGroups } from '../../../api/users';
import Modal from '../../../components/controls/Modal';
import SelectList, {
SelectListFilter,
SelectListSearchParams,
} from '../../../components/controls/SelectList';
+import { ResetButtonLink } from '../../../components/controls/buttons';
import { translate } from '../../../helpers/l10n';
import { User } from '../../../types/users';
interface Props {
onClose: () => void;
- onUpdateUsers: () => void;
user: User;
}
-interface State {
- needToReload: boolean;
- lastSearchParams?: SelectListSearchParams;
- groups: UserGroup[];
- groupsTotalCount?: number;
- selectedGroups: string[];
-}
-
-export default class GroupsForm extends React.PureComponent<Props, State> {
- mounted = false;
-
- constructor(props: Props) {
- super(props);
-
- this.state = {
- needToReload: false,
- groups: [],
- selectedGroups: [],
- };
- }
-
- componentDidMount() {
- this.mounted = true;
- }
+export default function GroupsForm(props: Props) {
+ const { user } = props;
+ const [needToReload, setNeedToReload] = React.useState<boolean>(false);
+ const [lastSearchParams, setLastSearchParams] = React.useState<
+ SelectListSearchParams | undefined
+ >(undefined);
+ const [groups, setGroups] = React.useState<UserGroup[]>([]);
+ const [groupsTotalCount, setGroupsTotalCount] = React.useState<number | undefined>(undefined);
+ const [selectedGroups, setSelectedGroups] = React.useState<string[]>([]);
- componentWillUnmount() {
- this.mounted = false;
- }
+ const invalidateUserList = useInvalidateUsersList();
- fetchUsers = (searchParams: SelectListSearchParams) =>
+ const fetchUsers = (searchParams: SelectListSearchParams) =>
getUserGroups({
- login: this.props.user.login,
+ login: user.login,
p: searchParams.page,
ps: searchParams.pageSize,
q: searchParams.query !== '' ? searchParams.query : undefined,
selected: searchParams.filter,
}).then((data) => {
- if (this.mounted) {
- this.setState((prevState) => {
- const more = searchParams.page != null && searchParams.page > 1;
-
- const groups = more ? [...prevState.groups, ...data.groups] : data.groups;
- const newSeletedGroups = data.groups.filter((gp) => gp.selected).map((gp) => gp.name);
- const selectedGroups = more
- ? [...prevState.selectedGroups, ...newSeletedGroups]
- : newSeletedGroups;
-
- return {
- lastSearchParams: searchParams,
- needToReload: false,
- groups,
- groupsTotalCount: data.paging.total,
- selectedGroups,
- };
- });
- }
+ const more = searchParams.page != null && searchParams.page > 1;
+ const allGroups = more ? [...groups, ...data.groups] : data.groups;
+ const newSeletedGroups = data.groups.filter((gp) => gp.selected).map((gp) => gp.name);
+ const allSelectedGroups = more ? [...selectedGroups, ...newSeletedGroups] : newSeletedGroups;
+
+ setLastSearchParams(searchParams);
+ setNeedToReload(false);
+ setGroups(allGroups);
+ setGroupsTotalCount(data.paging.total);
+ setSelectedGroups(allSelectedGroups);
});
- handleSelect = (name: string) =>
+ const handleSelect = (name: string) =>
addUserToGroup({
name,
- login: this.props.user.login,
+ login: user.login,
}).then(() => {
- if (this.mounted) {
- this.setState((state: State) => ({
- needToReload: true,
- selectedGroups: [...state.selectedGroups, name],
- }));
- }
+ setNeedToReload(true);
+ setSelectedGroups([...selectedGroups, name]);
});
- handleUnselect = (name: string) =>
+ const handleUnselect = (name: string) =>
removeUserFromGroup({
name,
- login: this.props.user.login,
+ login: user.login,
}).then(() => {
- if (this.mounted) {
- this.setState((state: State) => ({
- needToReload: true,
- selectedGroups: without(state.selectedGroups, name),
- }));
- }
+ setNeedToReload(true);
+ setSelectedGroups(without(selectedGroups, name));
});
- handleClose = () => {
- this.props.onUpdateUsers();
- this.props.onClose();
+ const handleClose = () => {
+ invalidateUserList();
+ props.onClose();
};
- renderElement = (name: string): React.ReactNode => {
- const group = find(this.state.groups, { name });
+ const renderElement = (name: string): React.ReactNode => {
+ const group = find(groups, { name });
return (
<div className="select-list-list-item">
{group === undefined ? (
);
};
- render() {
- const header = translate('users.update_groups');
+ const header = translate('users.update_groups');
- return (
- <Modal contentLabel={header} onRequestClose={this.handleClose}>
-
<div className="modal-head">
- <h2>{header}</h2>
- </div>
+ return (
+ <Modal contentLabel={header} onRequestClose={handleClose}>
+ <div className="modal-head">
+ <h2>{header}</h2>
+ </div>
- <div className="modal-body modal-container">
- <SelectList
- elements={this.state.groups.map((group) => group.name)}
- elementsTotalCount={this.state.groupsTotalCount}
- needToReload={
- this.state.needToReload &&
- this.state.lastSearchParams &&
- this.state.lastSearchParams.filter !== SelectListFilter.All
- }
- onSearch={this.fetchUsers}
- onSelect={this.handleSelect}
- onUnselect={this.handleUnselect}
- renderElement={this.renderElement}
- selectedElements={this.state.selectedGroups}
- withPaging
- />
- </div>
+ <div className="modal-body modal-container">
+ <SelectList
+ elements={groups.map((group) => group.name)}
+ elementsTotalCount={groupsTotalCount}
+ needToReload={
+ needToReload && lastSearchParams && lastSearchParams.filter !== SelectListFilter.All
+ }
+ onSearch={fetchUsers}
+ onSelect={handleSelect}
+ onUnselect={handleUnselect}
+ renderElement={renderElement}
+ selectedElements={selectedGroups}
+ withPaging
+ />
+ </div>
- <footer className="modal-foot">
- <ResetButtonLink onClick={this.handleClose}>{translate('done')}</ResetButtonLink>
- </footer>
- </Modal>
- );
- }
+ <footer className="modal-foot">
+ <ResetButtonLink onClick={handleClose}>{translate('done')}</ResetButtonLink>
+ </footer>
+ </Modal>
+ );
}
*/
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { ResetButtonLink } from '../../../components/controls/buttons';
+import { useInvalidateUsersList } from '../../../api/queries/users';
import Modal from '../../../components/controls/Modal';
+import { ResetButtonLink } from '../../../components/controls/buttons';
import { translate } from '../../../helpers/l10n';
import { User } from '../../../types/users';
import TokensForm from './TokensForm';
interface Props {
user: User;
onClose: () => void;
- updateTokensCount: (login: string, tokensCount: number) => void;
}
export default function TokensFormModal(props: Props) {
+ const [hasTokenCountChanged, setHasTokenCountChanged] = React.useState(false);
+ const invalidateUserList = useInvalidateUsersList();
+
+ const handleClose = () => {
+ if (hasTokenCountChanged) {
+ invalidateUserList();
+ }
+ props.onClose();
+ };
+
return (
- <Modal size="large" contentLabel={translate('users.tokens')} onRequestClose={props.onClose}>
+ <Modal size="large" contentLabel={translate('users.tokens')} onRequestClose={handleClose}>
<header className="modal-head">
<h2>
<FormattedMessage
<TokensForm
deleteConfirmation="inline"
login={props.user.login}
- updateTokensCount={props.updateTokensCount}
+ updateTokensCount={() => setHasTokenCountChanged(true)}
displayTokenTypeInput={false}
/>
</div>
<footer className="modal-foot">
- <ResetButtonLink onClick={props.onClose}>{translate('done')}</ResetButtonLink>
+ <ResetButtonLink onClick={handleClose}>{translate('done')}</ResetButtonLink>
</footer>
</Modal>
);
ActionsDropdownItem,
} from '../../../components/controls/ActionsDropdown';
import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { isUserActive, User } from '../../../types/users';
+import { User, isUserActive } from '../../../types/users';
import DeactivateForm from './DeactivateForm';
import PasswordForm from './PasswordForm';
import UserForm from './UserForm';
interface Props {
isCurrentUser: boolean;
- onUpdateUsers: () => void;
user: User;
manageProvider: string | undefined;
}
-interface State {
- openForm?: string;
-}
-
-export default class UserActions extends React.PureComponent<Props, State> {
- state: State = {};
+export default function UserActions(props: Props) {
+ const { isCurrentUser, user, manageProvider } = props;
- handleOpenDeactivateForm = () => {
- this.setState({ openForm: 'deactivate' });
- };
-
- handleOpenPasswordForm = () => {
- this.setState({ openForm: 'password' });
- };
-
- handleOpenUpdateForm = () => {
- this.setState({ openForm: 'update' });
- };
-
- handleCloseForm = () => {
- this.setState({ openForm: undefined });
- };
+ const [openForm, setOpenForm] = React.useState<string | undefined>(undefined);
- isInstanceManaged = () => {
- return this.props.manageProvider !== undefined;
+ const isInstanceManaged = () => {
+ return manageProvider !== undefined;
};
- isUserLocal = () => {
- return this.isInstanceManaged() && !this.props.user.managed;
+ const isUserLocal = () => {
+ return isInstanceManaged() && !user.managed;
};
- isUserManaged = () => {
- return this.isInstanceManaged() && this.props.user.managed;
+ const isUserManaged = () => {
+ return isInstanceManaged() && user.managed;
};
- renderActions = () => {
- const { user } = this.props;
+ if (isUserManaged()) {
+ return null;
+ }
- return (
+ return (
+ <>
<ActionsDropdown label={translateWithParameters('users.manage_user', user.login)}>
- {!this.isInstanceManaged() && (
+ {!isInstanceManaged() && (
<>
- <ActionsDropdownItem className="js-user-update" onClick={this.handleOpenUpdateForm}>
+ <ActionsDropdownItem className="js-user-update" onClick={() => setOpenForm('update')}>
{translate('update_details')}
</ActionsDropdownItem>
{user.local && (
<ActionsDropdownItem
className="js-user-change-password"
- onClick={this.handleOpenPasswordForm}
+ onClick={() => setOpenForm('password')}
>
{translate('my_profile.password.title')}
</ActionsDropdownItem>
</>
)}
- {isUserActive(user) && !
this.isInstanceManaged() && <ActionsDropdownDivider />}
- {isUserActive(user) && (!this.isInstanceManaged() || this.isUserLocal()) && (
+ {isUserActive(user) && !isInstanceManaged() && <ActionsDropdownDivider />}
+ {isUserActive(user) && (!isInstanceManaged() || isUserLocal()) && (
<ActionsDropdownItem
className="js-user-deactivate"
destructive
- onClick={this.handleOpenDeactivateForm}
+ onClick={() => setOpenForm('deactivate')}
>
{translate('users.deactivate')}
</ActionsDropdownItem>
)}
</ActionsDropdown>
- );
- };
-
- render() {
- const { openForm } = this.state;
- const { isCurrentUser, onUpdateUsers, user } = this.props;
-
- if (this.isUserManaged()) {
- return null;
- }
-
- return (
- <>
- {this.renderActions()}
- {openForm === 'deactivate' && isUserActive(user) && (
- <DeactivateForm
- onClose={this.handleCloseForm}
- onUpdateUsers={onUpdateUsers}
- user={user}
- />
- )}
- {openForm === 'password' && (
- <PasswordForm isCurrentUser={isCurrentUser} onClose={this.handleCloseForm} user={user} />
- )}
- {openForm === 'update' && (
- <UserForm onClose={this.handleCloseForm} onUpdateUsers={onUpdateUsers} user={user} />
- )}
- </>
- );
- }
+ {openForm === 'deactivate' && isUserActive(user) && (
+ <DeactivateForm onClose={() => setOpenForm(undefined)} user={user} />
+ )}
+ {openForm === 'password' && (
+ <PasswordForm
+ isCurrentUser={isCurrentUser}
+ onClose={() => setOpenForm(undefined)}
+ user={user}
+ />
+ )}
+ {openForm === 'update' && <UserForm onClose={() => setOpenForm(undefined)} user={user} />}
+ </>
+ );
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { createUser, updateUser } from '../../../api/users';
-import { Button, ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
+import { useCreateUserMutation, useUpdateUserMutation } from '../../../api/queries/users';
import SimpleModal from '../../../components/controls/SimpleModal';
+import { Button, ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import { Alert } from '../../../components/ui/Alert';
import MandatoryFieldMarker from '../../../components/ui/MandatoryFieldMarker';
import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation';
export interface Props {
onClose: () => void;
- onUpdateUsers: () => void;
user?: User;
}
-interface State {
- email: string;
- error?: string;
- login: string;
- name: string;
- password: string;
- scmAccounts: string[];
-}
-
-export default class UserForm extends React.PureComponent<Props, State> {
- mounted = false;
-
- constructor(props: Props) {
- super(props);
- const { user } = props;
- if (user) {
- this.state = {
- email: user.email || '',
- login: user.login,
- name: user.name || '',
- password: '',
- scmAccounts: user.scmAccounts || [],
- };
- } else {
- this.state = {
- email: '',
- login: '',
- name: '',
- password: '',
- scmAccounts: [],
- };
- }
- }
+export default function UserForm(props: Props) {
+ const { user } = props;
- componentDidMount() {
- this.mounted = true;
- }
+ const { mutate: createUser } = useCreateUserMutation();
+ const { mutate: updateUser } = useUpdateUserMutation();
- componentWillUnmount() {
- this.mounted = false;
- }
+ const [email, setEmail] = React.useState<string>(user?.email || '');
+ const [login, setLogin] = React.useState<string>(user?.login || '');
+ const [name, setName] = React.useState<string>(user?.name || '');
+ const [password, setPassword] = React.useState<string>('');
+ const [scmAccounts, setScmAccounts] = React.useState<string[]>(user?.scmAccounts || []);
+ const [error, setError] = React.useState<string | undefined>(undefined);
- handleError = (response: Response) => {
- if (!this.mounted || ![400, 500].includes(response.status)) {
+ const handleError = (response: Response) => {
+ if (![400, 500].includes(response.status)) {
return throwGlobalError(response);
- } else {
- return parseError(response).then(
- (errorMsg) => this.setState({ error: errorMsg }),
- throwGlobalError
- );
}
+ return parseError(response).then((errorMsg) => setError(errorMsg), throwGlobalError);
};
- handleEmailChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
- this.setState({ email: event.currentTarget.value });
-
- handleLoginChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
- this.setState({ login: event.currentTarget.value });
-
- handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
- this.setState({ name: event.currentTarget.value });
-
- handlePasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
- this.setState({ password: event.currentTarget.value });
-
- handleCreateUser = () => {
- return createUser({
- email: this.state.email || undefined,
- login: this.state.login,
- name: this.state.name,
- password: this.state.password,
- scmAccount: this.state.scmAccounts,
- }).then(() => {
- this.props.onUpdateUsers();
- this.props.onClose();
- }, this.handleError);
+ const handleCreateUser = () => {
+ createUser(
+ {
+ email: email || undefined,
+ login,
+ name,
+ password,
+ scmAccount: scmAccounts,
+ },
+ { onSuccess: props.onClose, onError: handleError }
+ );
};
- handleUpdateUser = () => {
- const { user } = this.props;
- return updateUser({
- email: user!.local ? this.state.email : undefined,
- login: this.state.login,
- name: user!.local ? this.state.name : undefined,
- scmAccount: this.state.scmAccounts,
- }).then(() => {
- this.props.onUpdateUsers();
- this.props.onClose();
- }, this.handleError);
+ const handleUpdateUser = () => {
+ const { user } = props;
+
+ updateUser(
+ {
+ email: user!.local ? email : undefined,
+ login,
+ name: user!.local ? name : undefined,
+ scmAccount: scmAccounts,
+ },
+ { onSuccess: props.onClose, onError: handleError }
+ );
};
- handleAddScmAccount = () => {
- this.setState(({ scmAccounts }) => ({ scmAccounts: scmAccounts.concat('') }));
+ const handleAddScmAccount = () => {
+ setScmAccounts((scmAccounts) => scmAccounts.concat(''));
};
- handleUpdateScmAccount = (idx: number, scmAccount: string) =>
- this.setState(({ scmAccounts: oldScmAccounts }) => {
- const scmAccounts = oldScmAccounts.slice();
- scmAccounts[idx] = scmAccount;
- return { scmAccounts };
+ const handleUpdateScmAccount = (idx: number, scmAccount: string) => {
+ setScmAccounts((scmAccounts) => {
+ const newScmAccounts = scmAccounts.slice();
+ newScmAccounts[idx] = scmAccount;
+ return newScmAccounts;
});
+ };
- handleRemoveScmAccount = (idx: number) =>
- this.setState(({ scmAccounts }) => ({
- scmAccounts: scmAccounts.slice(0, idx).concat(scmAccounts.slice(idx + 1)),
- }));
+ const handleRemoveScmAccount = (idx: number) => {
+ setScmAccounts((scmAccounts) => scmAccounts.slice(0, idx).concat(scmAccounts.slice(idx + 1)));
+ };
- render() {
- const { user } = this.props;
- const { error } = this.state;
+ const header = user ? translate('users.update_user') : translate('users.create_user');
- const header = user ? translate('users.update_user') : translate('users.create_user');
- return (
- <SimpleModal
- header={header}
- onClose={this.props.onClose}
- onSubmit={user ? this.handleUpdateUser : this.handleCreateUser}
- size="small"
- >
- {({ onCloseClick, onFormSubmit, submitting }) => (
- <form autoComplete="off" id="user-form" onSubmit={onFormSubmit}>
- <header className="modal-head">
- <h2>{header}</h2>
- </header>
+ return (
+ <SimpleModal
+ header={header}
+ onClose={props.onClose}
+ onSubmit={user ? handleUpdateUser : handleCreateUser}
+ size="small"
+ >
+ {({ onCloseClick, onFormSubmit, submitting }) => (
+ <form autoComplete="off" id="user-form" onSubmit={onFormSubmit}>
+ <header className="modal-head">
+ <h2>{header}</h2>
+ </header>
-
<div className="modal-body modal-container">
-
{error && <Alert variant="error">{error}</Alert>}
+ <div className="modal-body modal-container">
+ {error && <Alert variant="error">{error}</Alert>}
- {!error && user && !user.local && (
-
<Alert variant="warning">{translate('users.cannot_update_delegated_user')}</Alert>
- )}
+ {!error && user && !user.local && (
+ <Alert variant="warning">{translate('users.cannot_update_delegated_user')}</Alert>
+ )}
- <MandatoryFieldsExplanation className="modal-field" />
+ <MandatoryFieldsExplanation className="modal-field" />
- {!user && (
- <div className="modal-field">
- <label htmlFor="create-user-login">
- {translate('login')}
- <MandatoryFieldMarker />
- </label>
- <input
- autoComplete="off"
- autoFocus
- id="create-user-login"
- maxLength={255}
- minLength={3}
- name="login"
- onChange={this.handleLoginChange}
- required
- type="text"
- value={this.state.login}
- />
- <p className="note">{translateWithParameters('users.minimum_x_characters', 3)}</p>
- </div>
- )}
+ {!user && (
<div className="modal-field">
- <label htmlFor="create-user-name">
- {translate('name')}
+ <label htmlFor="create-user-login">
+ {translate('login')}
<MandatoryFieldMarker />
</label>
<input
autoComplete="off"
- autoFocus={!!user}
- disabled={user && !user.local}
- id="create-user-name"
- maxLength={200}
- name="name"
- onChange={this.handleNameChange}
+ autoFocus
+ id="create-user-login"
+ maxLength={255}
+ minLength={3}
+ name="login"
+ onChange={(e) => setLogin(e.currentTarget.value)}
required
type="text"
- value={this.state.name}
+ value={login}
/>
+ <p className="note">{translateWithParameters('users.minimum_x_characters', 3)}</p>
</div>
+ )}
+ <div className="modal-field">
+ <label htmlFor="create-user-name">
+ {translate('name')}
+ <MandatoryFieldMarker />
+ </label>
+ <input
+ autoComplete="off"
+ autoFocus={!!user}
+ disabled={user && !user.local}
+ id="create-user-name"
+ maxLength={200}
+ name="name"
+ onChange={(e) => setName(e.currentTarget.value)}
+ required
+ type="text"
+ value={name}
+ />
+ </div>
+ <div className="modal-field">
+ <label htmlFor="create-user-email">{translate('users.email')}</label>
+ <input
+ autoComplete="off"
+ disabled={user && !user.local}
+ id="create-user-email"
+ maxLength={100}
+ name="email"
+ onChange={(e) => setEmail(e.currentTarget.value)}
+ type="email"
+ value={email}
+ />
+ </div>
+ {!user && (
<div className="modal-field">
- <label htmlFor="create-user-email">{translate('users.email')}</label>
+ <label htmlFor="create-user-password">
+ {translate('password')}
+ <MandatoryFieldMarker />
+ </label>
<input
autoComplete="off"
- disabled={user && !user.local}
- id="create-user-email"
- maxLength={100}
- name="email"
- onChange={this.handleEmailChange}
- type="email"
- value={this.state.email}
+ id="create-user-password"
+ name="password"
+ onChange={(e) => setPassword(e.currentTarget.value)}
+ required
+ type="password"
+ value={password}
/>
</div>
- {!user && (
- <div className="modal-field">
- <label htmlFor="create-user-password">
- {translate('password')}
- <MandatoryFieldMarker />
- </label>
- <input
- autoComplete="off"
- id="create-user-password"
- name="password"
- onChange={this.handlePasswordChange}
- required
- type="password"
- value={this.state.password}
+ )}
+ <div className="modal-field">
+ <fieldset>
+ <legend>{translate('my_profile.scm_accounts')}</legend>
+ {scmAccounts.map((scm, idx) => (
+ <UserScmAccountInput
+ idx={idx}
+ key={idx}
+ onChange={handleUpdateScmAccount}
+ onRemove={handleRemoveScmAccount}
+ scmAccount={scm}
/>
+ ))}
+ <div className="spacer-bottom">
+ <Button className="js-scm-account-add" onClick={handleAddScmAccount}>
+ {translate('add_verb')}
+ </Button>
</div>
- )}
- <div className="modal-field">
- <fieldset>
- <legend>{translate('my_profile.scm_accounts')}</legend>
- {this.state.scmAccounts.map((scm, idx) => (
- <UserScmAccountInput
- idx={idx}
- key={idx}
- onChange={this.handleUpdateScmAccount}
- onRemove={this.handleRemoveScmAccount}
- scmAccount={scm}
- />
- ))}
- <div className="spacer-bottom">
- <Button className="js-scm-account-add" onClick={this.handleAddScmAccount}>
- {translate('add_verb')}
- </Button>
- </div>
- </fieldset>
- <p className="note">{translate('user.login_or_email_used_as_scm_account')}</p>
- </div>
+ </fieldset>
+ <p className="note">{translate('user.login_or_email_used_as_scm_account')}</p>
</div>
-
- <footer className="modal-foot">
- {submitting && <i className="spinner spacer-right" />}
- <SubmitButton disabled={submitting}>
- {user ? translate('update_verb') : translate('create')}
- </SubmitButton>
- <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
- </footer>
- </form>
- )}
- </SimpleModal>
- );
- }
+ </div>
+
+ <footer className="modal-foot">
+ {submitting && <i className="spinner spacer-right" />}
+ <SubmitButton disabled={submitting}>
+ {user ? translate('update_verb') : translate('create')}
+ </SubmitButton>
+ <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
+ </footer>
+ </form>
+ )}
+ </SimpleModal>
+ );
}
interface Props {
groups: string[];
- onUpdateUsers: () => void;
user: User;
manageProvider: string | undefined;
}
-interface State {
- openForm: boolean;
- showMore: boolean;
-}
-
const GROUPS_LIMIT = 3;
-export default class UserGroups extends React.PureComponent<Props, State> {
- state: State = { openForm: false, showMore: false };
-
- handleOpenForm = () => this.setState({ openForm: true });
- handleCloseForm = () => this.setState({ openForm: false });
+export default function UserGroups(props: Props) {
+ const { groups, user, manageProvider } = props;
- toggleShowMore = () => {
- this.setState((state) => ({ showMore: !state.showMore }));
- };
+ const [openForm, setOpenForm] = React.useState(false);
+ const [showMore, setShowMore] = React.useState(false);
- render() {
- const { groups, user, manageProvider } = this.props;
- const { showMore, openForm } = this.state;
- const limit = groups.length > GROUPS_LIMIT ? GROUPS_LIMIT - 1 : GROUPS_LIMIT;
- return (
- <ul>
- {groups.slice(0, limit).map((group) => (
+ const limit = groups.length > GROUPS_LIMIT ? GROUPS_LIMIT - 1 : GROUPS_LIMIT;
+ return (
+ <ul>
+ {groups.slice(0, limit).map((group) => (
+ <li className="little-spacer-bottom" key={group}>
+ {group}
+ </li>
+ ))}
+ {groups.length > GROUPS_LIMIT &&
+ showMore &&
+ groups.slice(limit).map((group) => (
<li className="little-spacer-bottom" key={group}>
{group}
</li>
))}
- {groups.length > GROUPS_LIMIT &&
- showMore &&
- groups.slice(limit).map((group) => (
- <li className="little-spacer-bottom" key={group}>
- {group}
- </li>
- ))}
- <li className="little-spacer-bottom">
- {groups.length > GROUPS_LIMIT && !showMore && (
- <ButtonLink className="js-user-more-groups spacer-right" onClick={this.toggleShowMore}>
- {translateWithParameters('more_x', groups.length - limit)}
- </ButtonLink>
- )}
- {manageProvider === undefined && (
- <ButtonIcon
- aria-label={translateWithParameters('users.update_users_groups', user.login)}
- className="js-user-groups button-small"
- onClick={this.handleOpenForm}
- tooltip={translate('users.update_groups')}
- >
- <BulletListIcon />
- </ButtonIcon>
- )}
- </li>
- {openForm && (
- <GroupsForm
- onClose={this.handleCloseForm}
- onUpdateUsers={this.props.onUpdateUsers}
- user={user}
- />
+ <li className="little-spacer-bottom">
+ {groups.length > GROUPS_LIMIT && !showMore && (
+ <ButtonLink
+ className="js-user-more-groups spacer-right"
+ onClick={() => setShowMore(!showMore)}
+ >
+ {translateWithParameters('more_x', groups.length - limit)}
+ </ButtonLink>
+ )}
+ {manageProvider === undefined && (
+ <ButtonIcon
+ aria-label={translateWithParameters('users.update_users_groups', user.login)}
+ className="js-user-groups button-small"
+ onClick={() => setOpenForm(true)}
+ tooltip={translate('users.update_groups')}
+ >
+ <BulletListIcon />
+ </ButtonIcon>
)}
- </ul>
- );
- }
+ </li>
+ {openForm && <GroupsForm onClose={() => setOpenForm(false)} user={user} />}
+ </ul>
+ );
}
export interface UserListItemProps {
identityProvider?: IdentityProvider;
isCurrentUser: boolean;
- onUpdateUsers: () => void;
- updateTokensCount: (login: string, tokensCount: number) => void;
user: User;
manageProvider: string | undefined;
}
export default function UserListItem(props: UserListItemProps) {
const [openTokenForm, setOpenTokenForm] = React.useState(false);
- const {
- identityProvider,
- onUpdateUsers,
- user,
- manageProvider,
- isCurrentUser,
- updateTokensCount,
- } = props;
+ const { identityProvider, user, manageProvider, isCurrentUser } = props;
return (
<tr>
<DateFromNow date={user.sonarLintLastConnectionDate} hourPrecision />
</td>
<td className="thin nowrap text-middle">
- <UserGroups
- groups={user.groups ?? []}
- manageProvider={manageProvider}
- onUpdateUsers={onUpdateUsers}
- user={user}
- />
+ <UserGroups groups={user.groups ?? []} manageProvider={manageProvider} user={user} />
</td>
<td className="thin nowrap text-middle">
{user.tokensCount}
{(manageProvider === undefined || !user.managed) && (
<td className="thin nowrap text-right text-middle">
- <UserActions
- isCurrentUser={isCurrentUser}
- onUpdateUsers={onUpdateUsers}
- user={user}
- manageProvider={manageProvider}
- />
+ <UserActions isCurrentUser={isCurrentUser} user={user} manageProvider={manageProvider} />
</td>
)}
- {openTokenForm && (
- <TokensFormModal
- onClose={() => setOpenTokenForm(false)}
- updateTokensCount={updateTokensCount}
- user={user}
- />
- )}
+ {openTokenForm && <TokensFormModal onClose={() => setOpenTokenForm(false)} user={user} />}
</tr>
);
}
projects / sonarqube.git / commitdiff