constructor() {
this.tokens = cloneDeep(defaultTokens);
- (getTokens as jest.Mock).mockImplementation(this.handleGetTokens);
- (generateToken as jest.Mock).mockImplementation(this.handleGenerateToken);
- (revokeToken as jest.Mock).mockImplementation(this.handleRevokeToken);
+ jest.mocked(getTokens).mockImplementation(this.handleGetTokens);
+ jest.mocked(generateToken).mockImplementation(this.handleGenerateToken);
+ jest.mocked(revokeToken).mockImplementation(this.handleRevokeToken);
}
handleGetTokens = () => {
expirationDate,
}: {
name: string;
- login?: string;
+ login: string;
type: TokenType;
projectKey: string;
expirationDate?: string;
sonarQubeLastConnectionDate: '2023-06-27T17:08:59+0200',
sonarLintLastConnectionDate: '2023-05-27T17:08:59+0200',
email: 'alice.merveille@wonderland.com',
- groupsCount: 2,
}),
mockRestUser({
managed: false,
id: 1003,
name: 'test3',
description: 'test3',
+ selected: true,
+ default: false,
+ },
+ {
+ id: 1004,
+ name: 'test4',
+ description: 'test4',
selected: false,
default: false,
},
};
handleGetUserGroups: typeof getUserGroups = (data) => {
+ if (data.login !== 'alice.merveille') {
+ return this.reply({
+ paging: { pageIndex: 1, pageSize: 10, total: 0 },
+ groups: [],
+ });
+ }
const filteredGroups = this.groups
.filter((g) => g.name.includes(data.q ?? ''))
.filter((g) => {
switch (data.selected) {
- case 'selected':
- return g.selected;
+ case 'all':
+ return true;
case 'deselected':
return !g.selected;
default:
- return true;
+ return g.selected;
}
});
+
return this.reply({
paging: { pageIndex: 1, pageSize: 10, total: filteredGroups.length },
groups: filteredGroups,
handleAddUserToGroup: typeof addUserToGroup = ({ name }) => {
this.groups = this.groups.map((g) => (g.name === name ? { ...g, selected: true } : g));
- this.users.find((u) => u.login === 'alice.merveille')!.groupsCount++;
return this.reply({});
};
}
return g;
});
- this.users.find((u) => u.login === 'alice.merveille')!.groupsCount--;
return isDefault
? Promise.reject({
errors: [{ msg: 'Cannot remove Default group' }],
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { screen, within } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
import selectEvent from 'react-select-event';
);
expect(await screen.findByText('users.tokens')).toBeInTheDocument();
- expect(screen.getAllByRole('row')).toHaveLength(3); // 2 tokens + header
+ await waitFor(() => expect(screen.getAllByRole('row')).toHaveLength(3)); // 2 tokens + header
// Add the token
const newTokenName = 'importantToken';
await user.click(screen.getByRole('button', { name: 'yes' }));
- expect(screen.getAllByRole('row')).toHaveLength(3); // 2 tokens + header
+ await waitFor(() => expect(screen.getAllByRole('row')).toHaveLength(3)); // 2 tokens + header
}
);
expect(await screen.findByText('users.tokens')).toBeInTheDocument();
// expired token is flagged as such
- const expiredTokenRow = screen.getByRole('row', { name: /expired token/ });
+ const expiredTokenRow = await screen.findByRole('row', { name: /expired token/ });
expect(within(expiredTokenRow).getByText('my_account.tokens.expired')).toBeInTheDocument();
// unexpired token is not flagged
it('should be able to edit the groups of a user', async () => {
const user = userEvent.setup();
renderUsersApp();
- expect(await within(await ui.aliceRow.find()).findByText('2')).toBeInTheDocument();
+ expect(await within(await ui.aliceRow.find()).findByText('3')).toBeInTheDocument();
await act(async () => user.click(await ui.aliceUpdateGroupButton.find()));
expect(await ui.dialogGroups.find()).toBeInTheDocument();
- expect(ui.getGroups()).toHaveLength(2);
+ expect(ui.getGroups()).toHaveLength(3);
await act(async () => user.click(await ui.allFilter.find()));
- expect(ui.getGroups()).toHaveLength(3);
+ expect(ui.getGroups()).toHaveLength(4);
await act(() => user.click(ui.unselectedFilter.get()));
expect(ui.reloadButton.query()).not.toBeInTheDocument();
expect(await ui.reloadButton.find()).toBeInTheDocument();
await act(() => user.click(ui.selectedFilter.get()));
- expect(ui.getGroups()).toHaveLength(3);
+ expect(ui.getGroups()).toHaveLength(4);
await act(() => user.click(ui.doneButton.get()));
expect(ui.dialogGroups.query()).not.toBeInTheDocument();
- expect(await within(await ui.aliceRow.find()).findByText('3')).toBeInTheDocument();
+ expect(await within(await ui.aliceRow.find()).findByText('4')).toBeInTheDocument();
await act(async () => user.click(await ui.aliceUpdateGroupButton.find()));
await act(() => user.click(ui.getGroups()[1]));
expect(await ui.reloadButton.find()).toBeInTheDocument();
await act(() => user.click(ui.reloadButton.get()));
- expect(ui.getGroups()).toHaveLength(2);
+ expect(ui.getGroups()).toHaveLength(3);
- await act(() => user.type(within(ui.dialogGroups.get()).getByRole('searchbox'), '3'));
+ await act(() => user.type(within(ui.dialogGroups.get()).getByRole('searchbox'), '4'));
expect(ui.getGroups()).toHaveLength(1);
await act(() => user.click(ui.doneButton.get()));
expect(ui.dialogGroups.query()).not.toBeInTheDocument();
- expect(await within(await ui.aliceRow.find()).findByText('2')).toBeInTheDocument();
+ expect(await within(await ui.aliceRow.find()).findByText('3')).toBeInTheDocument();
});
it('should update user', async () => {
expect(
screen.queryByText(`user.${ChangePasswordResults.OldPasswordIncorrect}`)
).not.toBeInTheDocument();
- await user.click(ui.changeButton.get());
+ await act(() => user.click(ui.changeButton.get()));
expect(
await within(ui.dialogPasswords.get()).findByText(
`user.${ChangePasswordResults.OldPasswordIncorrect}`
expect(
screen.queryByText(`user.${ChangePasswordResults.NewPasswordSameAsOld}`)
).not.toBeInTheDocument();
- await user.click(ui.changeButton.get());
+ await act(() => user.click(ui.changeButton.get()));
expect(
await screen.findByText(`user.${ChangePasswordResults.NewPasswordSameAsOld}`)
).toBeInTheDocument();
await user.type(ui.newPassword.get(), 'test2');
await user.type(ui.confirmPassword.get(), 'test2');
- await user.click(ui.changeButton.get());
+ await act(() => user.click(ui.changeButton.get()));
expect(ui.dialogPasswords.query()).not.toBeInTheDocument();
});
*/
import { find, without } from 'lodash';
import * as React from 'react';
-import { addUserToGroup, removeUserFromGroup } from '../../../api/user_groups';
import { UserGroup, getUserGroups } from '../../../api/users';
import Modal from '../../../components/controls/Modal';
import SelectList, {
} from '../../../components/controls/SelectList';
import { ResetButtonLink } from '../../../components/controls/buttons';
import { translate } from '../../../helpers/l10n';
-import { useInvalidateUsersList } from '../../../queries/users';
+import { useAddUserToGroupMutation, useRemoveUserToGroupMutation } from '../../../queries/users';
import { RestUserDetailed } from '../../../types/users';
interface Props {
const [groups, setGroups] = React.useState<UserGroup[]>([]);
const [groupsTotalCount, setGroupsTotalCount] = React.useState<number | undefined>(undefined);
const [selectedGroups, setSelectedGroups] = React.useState<string[]>([]);
-
- const invalidateUserList = useInvalidateUsersList();
+ const { mutateAsync: addUserToGroup } = useAddUserToGroupMutation();
+ const { mutateAsync: removeUserFromGroup } = useRemoveUserToGroupMutation();
const fetchUsers = (searchParams: SelectListSearchParams) =>
getUserGroups({
setSelectedGroups(without(selectedGroups, name));
});
- const handleClose = () => {
- invalidateUserList();
- props.onClose();
- };
-
const renderElement = (name: string): React.ReactNode => {
const group = find(groups, { name });
return (
const header = translate('users.update_groups');
return (
- <Modal contentLabel={header} onRequestClose={handleClose}>
+ <Modal contentLabel={header} onRequestClose={props.onClose}>
<div className="modal-head">
<h2>{header}</h2>
</div>
</div>
<footer className="modal-foot">
- <ResetButtonLink onClick={handleClose}>{translate('done')}</ResetButtonLink>
+ <ResetButtonLink onClick={props.onClose}>{translate('done')}</ResetButtonLink>
</footer>
</Modal>
);
import { isEmpty } from 'lodash';
import * as React from 'react';
import { getScannableProjects } from '../../../api/components';
-import { generateToken, getTokens } from '../../../api/user-tokens';
import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
import { SubmitButton } from '../../../components/controls/buttons';
getAvailableExpirationOptions,
} from '../../../helpers/tokens';
import { hasGlobalPermission } from '../../../helpers/users';
+import { useGenerateTokenMutation, useUserTokensQuery } from '../../../queries/users';
import { Permissions } from '../../../types/permissions';
-import { TokenExpiration, TokenType, UserToken } from '../../../types/token';
+import { TokenExpiration, TokenType } from '../../../types/token';
import { CurrentUser } from '../../../types/users';
import TokensFormItem, { TokenDeleteConfirmation } from './TokensFormItem';
import TokensFormNewToken from './TokensFormNewToken';
interface Props {
deleteConfirmation: TokenDeleteConfirmation;
login: string;
- updateTokensCount?: (login: string, tokensCount: number) => void;
displayTokenTypeInput: boolean;
currentUser: CurrentUser;
}
-interface State {
- generating: boolean;
- loading: boolean;
- newToken?: { name: string; token: string };
- newTokenName: string;
- newTokenType?: TokenType;
- tokens: UserToken[];
- projects: LabelValueSelectOption[];
- selectedProject?: LabelValueSelectOption;
- newTokenExpiration: TokenExpiration;
- tokenExpirationOptions: { value: TokenExpiration; label: string }[];
- tokenTypeOptions: Array<{ label: string; value: TokenType }>;
-}
-
-export class TokensForm extends React.PureComponent<Props, State> {
- mounted = false;
- state: State = {
- generating: false,
- loading: true,
- newTokenName: '',
- newTokenType: this.props.displayTokenTypeInput ? undefined : TokenType.User,
- tokens: [],
- projects: [],
- newTokenExpiration: TokenExpiration.OneMonth,
- tokenExpirationOptions: EXPIRATION_OPTIONS,
- tokenTypeOptions: [],
- };
-
- componentDidMount() {
- this.mounted = true;
- this.loadData();
- }
-
- componentWillUnmount() {
- this.mounted = false;
- }
-
- loadData = async () => {
- this.fetchTokens();
- this.fetchTokenSettings();
-
- if (this.props.displayTokenTypeInput) {
- const projects = await this.fetchProjects();
- this.constructTokenTypeOptions(projects);
- }
- };
-
- fetchTokens = () => {
- this.setState({ loading: true });
- getTokens(this.props.login).then(
- (tokens) => {
- if (this.mounted) {
- this.setState({ loading: false, tokens });
- }
- },
- () => {
- if (this.mounted) {
- this.setState({ loading: false });
- }
- }
- );
- };
-
- fetchTokenSettings = async () => {
- const tokenExpirationOptions = await getAvailableExpirationOptions();
- if (this.mounted) {
- this.setState({ tokenExpirationOptions });
- }
- };
-
- fetchProjects = async () => {
- const { projects: projectArray } = await getScannableProjects();
- const projects = projectArray.map((project) => ({ label: project.name, value: project.key }));
-
- this.setState({
- projects,
- selectedProject: projects.length === 1 ? projects[0] : undefined,
- });
-
- return projects;
- };
-
- constructTokenTypeOptions = (projects: LabelValueSelectOption[]) => {
- const { currentUser } = this.props;
+export function TokensForm(props: Props) {
+ const { currentUser, deleteConfirmation, displayTokenTypeInput, login } = props;
+ const { data: tokens, isLoading: loading } = useUserTokensQuery(login);
+ const [newToken, setNewToken] = React.useState<{ name: string; token: string }>();
+ const [newTokenName, setNewTokenName] = React.useState('');
+ const [newTokenType, setNewTokenType] = React.useState<TokenType>();
+ const [projects, setProjects] = React.useState<LabelValueSelectOption[]>([]);
+ const [selectedProject, setSelectedProject] = React.useState<LabelValueSelectOption>();
+ const [newTokenExpiration, setNewTokenExpiration] = React.useState<TokenExpiration>(
+ TokenExpiration.OneMonth
+ );
+ const [tokenExpirationOptions, setTokenExpirationOptions] =
+ React.useState<{ value: TokenExpiration; label: string }[]>(EXPIRATION_OPTIONS);
+
+ const { mutateAsync: generate, isLoading: generating } = useGenerateTokenMutation();
+
+ const tokenTypeOptions = React.useMemo(() => {
+ const value = [{ label: translate('users.tokens', TokenType.User), value: TokenType.User }];
- const tokenTypeOptions = [
- { label: translate('users.tokens', TokenType.User), value: TokenType.User },
- ];
if (hasGlobalPermission(currentUser, Permissions.Scan)) {
- tokenTypeOptions.unshift({
+ value.unshift({
label: translate('users.tokens', TokenType.Global),
value: TokenType.Global,
});
}
if (!isEmpty(projects)) {
- tokenTypeOptions.unshift({
+ value.unshift({
label: translate('users.tokens', TokenType.Project),
value: TokenType.Project,
});
}
+ return value;
+ }, [projects, currentUser]);
+
+ React.useEffect(() => {
if (tokenTypeOptions.length === 1) {
- this.setState({
- newTokenType: tokenTypeOptions[0].value,
- tokenTypeOptions,
- });
- } else {
- this.setState({ tokenTypeOptions });
+ setNewTokenType(tokenTypeOptions[0].value);
}
- };
-
- updateTokensCount = () => {
- if (this.props.updateTokensCount) {
- this.props.updateTokensCount(this.props.login, this.state.tokens.length);
+ }, [tokenTypeOptions]);
+
+ React.useEffect(() => {
+ getAvailableExpirationOptions()
+ .then((options) => {
+ setTokenExpirationOptions(options);
+ })
+ .catch(() => {});
+
+ if (displayTokenTypeInput) {
+ getScannableProjects()
+ .then(({ projects: projectArray }) => {
+ const projects = projectArray.map((project) => ({
+ label: project.name,
+ value: project.key,
+ }));
+ setProjects(projects);
+ setSelectedProject(projects.length === 1 ? projects[0] : undefined);
+ })
+ .catch(() => {});
}
- };
+ }, [displayTokenTypeInput, currentUser]);
- handleGenerateToken = async (event: React.SyntheticEvent<HTMLFormElement>) => {
+ const handleGenerateToken = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
- const { login } = this.props;
- const {
- newTokenName,
- newTokenType = TokenType.User,
- selectedProject,
- tokenTypeOptions,
- newTokenExpiration,
- } = this.state;
- this.setState({ generating: true });
- try {
- const newToken = await generateToken({
- name: newTokenName,
- login,
- type: newTokenType,
- ...(newTokenType === TokenType.Project &&
- selectedProject !== undefined && { projectKey: selectedProject.value }),
- ...(newTokenExpiration !== TokenExpiration.NoExpiration && {
- expirationDate: computeTokenExpirationDate(newTokenExpiration),
+ generate({
+ name: newTokenName,
+ login,
+ type: newTokenType,
+ ...(newTokenType === TokenType.Project &&
+ selectedProject !== undefined && {
+ projectKey: selectedProject.value,
+ projectName: selectedProject.label,
}),
- });
-
- if (this.mounted) {
- this.setState((state) => {
- const tokens: UserToken[] = [
- ...state.tokens,
- {
- name: newToken.name,
- createdAt: newToken.createdAt,
- isExpired: false,
- expirationDate: newToken.expirationDate,
- type: newTokenType,
- ...(newTokenType === TokenType.Project &&
- selectedProject !== undefined && {
- project: { key: selectedProject.value, name: selectedProject.label },
- }),
- },
- ];
- return {
- generating: false,
- newToken,
- newTokenName: '',
- selectedProject: undefined,
- newTokenType: tokenTypeOptions.length === 1 ? tokenTypeOptions[0].value : undefined,
- newTokenExpiration: TokenExpiration.OneMonth,
- tokens,
- };
- }, this.updateTokensCount);
- }
- } catch (e) {
- if (this.mounted) {
- this.setState({ generating: false });
- }
- }
- };
-
- handleRevokeToken = (revokedToken: UserToken) => {
- this.setState(
- (state) => ({
- tokens: state.tokens.filter((token) => token.name !== revokedToken.name),
+ ...(newTokenExpiration !== TokenExpiration.NoExpiration && {
+ expirationDate: computeTokenExpirationDate(newTokenExpiration),
}),
- this.updateTokensCount
- );
+ })
+ .then((newToken) => {
+ setNewToken(newToken);
+ setNewTokenName('');
+ setSelectedProject(undefined);
+ setNewTokenType(tokenTypeOptions.length === 1 ? tokenTypeOptions[0].value : undefined);
+ setNewTokenExpiration(TokenExpiration.OneMonth);
+ })
+ .catch(() => {});
};
- isSubmitButtonDisabled = () => {
- const { displayTokenTypeInput } = this.props;
- const { generating, newTokenName, newTokenType, selectedProject } = this.state;
-
+ const isSubmitButtonDisabled = () => {
if (!displayTokenTypeInput) {
return generating || newTokenName.length <= 0;
}
return !newTokenType;
};
- handleNewTokenChange = (evt: React.SyntheticEvent<HTMLInputElement>) => {
- this.setState({ newTokenName: evt.currentTarget.value });
+ const handleNewTokenChange = (evt: React.SyntheticEvent<HTMLInputElement>) => {
+ setNewTokenName(evt.currentTarget.value);
};
- handleNewTokenTypeChange = ({ value }: { value: TokenType }) => {
- this.setState({ newTokenType: value });
+ const handleNewTokenTypeChange = ({ value }: { value: TokenType }) => {
+ setNewTokenType(value);
};
- handleProjectChange = (selectedProject: LabelValueSelectOption) => {
- this.setState({ selectedProject });
+ const handleProjectChange = (selectedProject: LabelValueSelectOption) => {
+ setSelectedProject(selectedProject);
};
- handleNewTokenExpirationChange = ({ value }: { value: TokenExpiration }) => {
- this.setState({ newTokenExpiration: value });
+ const handleNewTokenExpirationChange = ({ value }: { value: TokenExpiration }) => {
+ setNewTokenExpiration(value);
};
- renderForm() {
- const {
- newTokenName,
- newTokenType,
- projects,
- selectedProject,
- newTokenExpiration,
- tokenExpirationOptions,
- tokenTypeOptions,
- } = this.state;
- const { displayTokenTypeInput } = this.props;
-
- return (
- <form autoComplete="off" className="display-flex-center" onSubmit={this.handleGenerateToken}>
+ const customSpinner = (
+ <tr>
+ <td>
+ <i className="spinner" />
+ </td>
+ </tr>
+ );
+
+ return (
+ <>
+ <h3 className="spacer-bottom">{translate('users.tokens.generate')}</h3>
+ <form autoComplete="off" className="display-flex-center" onSubmit={handleGenerateToken}>
<div className="display-flex-column input-large spacer-right ">
<label htmlFor="token-name" className="text-bold">
{translate('users.tokens.name')}
id="token-name"
className="spacer-top it__token-name"
maxLength={100}
- onChange={this.handleNewTokenChange}
+ onChange={handleNewTokenChange}
placeholder={translate('users.tokens.enter_name')}
required
type="text"
inputId="token-select-type"
className="spacer-top it__token-type"
isSearchable={false}
- onChange={this.handleNewTokenTypeChange}
+ onChange={handleNewTokenTypeChange}
options={tokenTypeOptions}
placeholder={translate('users.tokens.select_type')}
value={
<Select
inputId="token-select-project"
className="spacer-top it__project"
- onChange={this.handleProjectChange}
+ onChange={handleProjectChange}
options={projects}
placeholder={translate('users.tokens.select_project')}
value={selectedProject}
inputId="token-select-expiration"
className="spacer-top"
isSearchable={false}
- onChange={this.handleNewTokenExpirationChange}
+ onChange={handleNewTokenExpirationChange}
options={tokenExpirationOptions}
value={tokenExpirationOptions.find((option) => option.value === newTokenExpiration)}
/>
<SubmitButton
className="it__generate-token"
style={{ marginTop: 'auto' }}
- disabled={this.isSubmitButtonDisabled()}
+ disabled={isSubmitButtonDisabled()}
>
{translate('users.generate')}
</SubmitButton>
</form>
- );
- }
-
- renderItems() {
- const { tokens } = this.state;
- if (tokens.length <= 0) {
- return (
- <tr>
- <td className="note" colSpan={7}>
- {translate('users.no_tokens')}
- </td>
- </tr>
- );
- }
- return tokens.map((token) => (
- <TokensFormItem
- deleteConfirmation={this.props.deleteConfirmation}
- key={token.name}
- login={this.props.login}
- onRevokeToken={this.handleRevokeToken}
- token={token}
- />
- ));
- }
-
- render() {
- const { loading, newToken, tokens } = this.state;
- const customSpinner = (
- <tr>
- <td>
- <i className="spinner" />
- </td>
- </tr>
- );
-
- return (
- <>
- <h3 className="spacer-bottom">{translate('users.tokens.generate')}</h3>
- {this.renderForm()}
- {newToken && <TokensFormNewToken token={newToken} />}
-
- <table className="data zebra big-spacer-top fixed">
- <thead>
- <tr>
- <th>{translate('name')}</th>
- <th>{translate('my_account.token_type')}</th>
- <th>{translate('my_account.project_name')}</th>
- <th>{translate('my_account.tokens_last_usage')}</th>
- <th className="text-right">{translate('created')}</th>
- <th className="text-right">{translate('my_account.tokens.expiration')}</th>
- <th className="text-right">{translate('actions')}</th>
- </tr>
- </thead>
- <tbody>
- <Spinner customSpinner={customSpinner} loading={loading && tokens.length <= 0}>
- {this.renderItems()}
- </Spinner>
- </tbody>
- </table>
- </>
- );
- }
+ {newToken && <TokensFormNewToken token={newToken} />}
+
+ <table className="data zebra big-spacer-top fixed">
+ <thead>
+ <tr>
+ <th>{translate('name')}</th>
+ <th>{translate('my_account.token_type')}</th>
+ <th>{translate('my_account.project_name')}</th>
+ <th>{translate('my_account.tokens_last_usage')}</th>
+ <th className="text-right">{translate('created')}</th>
+ <th className="text-right">{translate('my_account.tokens.expiration')}</th>
+ <th className="text-right">{translate('actions')}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <Spinner customSpinner={customSpinner} loading={!!loading}>
+ {tokens && tokens.length <= 0 ? (
+ <tr>
+ <td className="note" colSpan={7}>
+ {translate('users.no_tokens')}
+ </td>
+ </tr>
+ ) : (
+ tokens?.map((token) => (
+ <TokensFormItem
+ deleteConfirmation={deleteConfirmation}
+ key={token.name}
+ login={login}
+ token={token}
+ />
+ ))
+ )}
+ </Spinner>
+ </tbody>
+ </table>
+ </>
+ );
}
export default withCurrentUserContext(TokensForm);
import classNames from 'classnames';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { revokeToken } from '../../../api/user-tokens';
import ConfirmButton from '../../../components/controls/ConfirmButton';
import { Button } from '../../../components/controls/buttons';
import WarningIcon from '../../../components/icons/WarningIcon';
import DateFromNow from '../../../components/intl/DateFromNow';
import Spinner from '../../../components/ui/Spinner';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { useRevokeTokenMutation } from '../../../queries/users';
import { UserToken } from '../../../types/token';
export type TokenDeleteConfirmation = 'inline' | 'modal';
interface Props {
deleteConfirmation: TokenDeleteConfirmation;
login: string;
- onRevokeToken: (token: UserToken) => void;
token: UserToken;
}
-interface State {
- loading: boolean;
- showConfirmation: boolean;
-}
-
-export default class TokensFormItem extends React.PureComponent<Props, State> {
- mounted = false;
- state: State = { loading: false, showConfirmation: false };
-
- componentDidMount() {
- this.mounted = true;
- }
+export default function TokensFormItem(props: Props) {
+ const { token, deleteConfirmation, login } = props;
+ const [showConfirmation, setShowConfirmation] = React.useState(false);
+ const { mutateAsync, isLoading } = useRevokeTokenMutation();
- componentWillUnmount() {
- this.mounted = false;
- }
+ const handleRevoke = () => mutateAsync({ login, name: token.name });
- handleClick = () => {
- if (this.state.showConfirmation) {
- this.handleRevoke().then(() => {
- if (this.mounted) {
- this.setState({ showConfirmation: false });
- }
- });
+ const handleClick = () => {
+ if (showConfirmation) {
+ handleRevoke()
+ .then(() => setShowConfirmation(false))
+ .catch(() => setShowConfirmation(false));
} else {
- this.setState({ showConfirmation: true });
+ setShowConfirmation(true);
}
};
- handleRevoke = () => {
- this.setState({ loading: true });
- return revokeToken({ login: this.props.login, name: this.props.token.name }).then(
- () => this.props.onRevokeToken(this.props.token),
- () => {
- if (this.mounted) {
- this.setState({ loading: false });
- }
- }
- );
- };
-
- render() {
- const { deleteConfirmation, token } = this.props;
- const { loading, showConfirmation } = this.state;
- return (
- <tr className={classNames({ 'text-muted-2': token.isExpired })}>
- <td title={token.name} className="hide-overflow nowrap">
- {token.name}
- {token.isExpired && (
- <div className="spacer-top text-warning">
- <WarningIcon className="little-spacer-right" />
- {translate('my_account.tokens.expired')}
- </div>
- )}
- </td>
- <td title={translate('users.tokens', token.type)} className="hide-overflow thin">
- {translate('users.tokens', token.type, 'short')}
- </td>
- <td title={token.project?.name} className="hide-overflow">
- {token.project?.name}
- </td>
- <td className="thin nowrap">
- <DateFromNow date={token.lastConnectionDate} hourPrecision />
- </td>
- <td className="thin nowrap text-right">
- <DateFormatter date={token.createdAt} long />
- </td>
- <td className={classNames('thin nowrap text-right', { 'text-warning': token.isExpired })}>
- {token.expirationDate ? <DateFormatter date={token.expirationDate} long /> : '–'}
- </td>
- <td className="thin nowrap text-right">
- {token.isExpired && (
- <Button
- className="button-red input-small"
- disabled={loading}
- onClick={this.handleRevoke}
- aria-label={translateWithParameters('users.tokens.remove_label', token.name)}
- >
- <Spinner className="little-spacer-right" loading={loading}>
- {translate('remove')}
- </Spinner>
- </Button>
- )}
- {!token.isExpired && deleteConfirmation === 'modal' && (
- <ConfirmButton
- confirmButtonText={translate('yes')}
- isDestructive
- modalBody={
- <FormattedMessage
- defaultMessage={translate('users.tokens.sure_X')}
- id="users.tokens.sure_X"
- values={{ token: <strong>{token.name}</strong> }}
- />
- }
- modalHeader={translateWithParameters('users.tokens.revoke_label', token.name)}
- onConfirm={this.handleRevoke}
- >
- {({ onClick }) => (
- <Button
- className="button-red input-small"
- disabled={loading}
- onClick={onClick}
- aria-label={translateWithParameters('users.tokens.revoke_label', token.name)}
- >
- {translate('users.tokens.revoke')}
- </Button>
- )}
- </ConfirmButton>
- )}
- {!token.isExpired && deleteConfirmation === 'inline' && (
- <Button
- className="button-red input-small"
- disabled={loading}
- aria-label={
- showConfirmation
- ? translate('users.tokens.sure')
- : translateWithParameters('users.tokens.revoke_label', token.name)
- }
- onClick={this.handleClick}
- >
- <Spinner className="little-spacer-right" loading={loading} />
- {showConfirmation ? translate('users.tokens.sure') : translate('users.tokens.revoke')}
- </Button>
- )}
- </td>
- </tr>
- );
- }
+ return (
+ <tr className={classNames({ 'text-muted-2': token.isExpired })}>
+ <td title={token.name} className="hide-overflow nowrap">
+ {token.name}
+ {token.isExpired && (
+ <div className="spacer-top text-warning">
+ <WarningIcon className="little-spacer-right" />
+ {translate('my_account.tokens.expired')}
+ </div>
+ )}
+ </td>
+ <td title={translate('users.tokens', token.type)} className="hide-overflow thin">
+ {translate('users.tokens', token.type, 'short')}
+ </td>
+ <td title={token.project?.name} className="hide-overflow">
+ {token.project?.name}
+ </td>
+ <td className="thin nowrap">
+ <DateFromNow date={token.lastConnectionDate} hourPrecision />
+ </td>
+ <td className="thin nowrap text-right">
+ <DateFormatter date={token.createdAt} long />
+ </td>
+ <td className={classNames('thin nowrap text-right', { 'text-warning': token.isExpired })}>
+ {token.expirationDate ? <DateFormatter date={token.expirationDate} long /> : '–'}
+ </td>
+ <td className="thin nowrap text-right">
+ {token.isExpired && (
+ <Button
+ className="button-red input-small"
+ disabled={isLoading}
+ onClick={handleRevoke}
+ aria-label={translateWithParameters('users.tokens.remove_label', token.name)}
+ >
+ <Spinner className="little-spacer-right" loading={isLoading}>
+ {translate('remove')}
+ </Spinner>
+ </Button>
+ )}
+ {!token.isExpired && deleteConfirmation === 'modal' && (
+ <ConfirmButton
+ confirmButtonText={translate('yes')}
+ isDestructive
+ modalBody={
+ <FormattedMessage
+ defaultMessage={translate('users.tokens.sure_X')}
+ id="users.tokens.sure_X"
+ values={{ token: <strong>{token.name}</strong> }}
+ />
+ }
+ modalHeader={translateWithParameters('users.tokens.revoke_label', token.name)}
+ onConfirm={handleRevoke}
+ >
+ {({ onClick }) => (
+ <Button
+ className="button-red input-small"
+ disabled={isLoading}
+ onClick={onClick}
+ aria-label={translateWithParameters('users.tokens.revoke_label', token.name)}
+ >
+ {translate('users.tokens.revoke')}
+ </Button>
+ )}
+ </ConfirmButton>
+ )}
+ {!token.isExpired && deleteConfirmation === 'inline' && (
+ <Button
+ className="button-red input-small"
+ disabled={isLoading}
+ aria-label={
+ showConfirmation
+ ? translate('users.tokens.sure')
+ : translateWithParameters('users.tokens.revoke_label', token.name)
+ }
+ onClick={handleClick}
+ >
+ <Spinner className="little-spacer-right" loading={isLoading} />
+ {showConfirmation ? translate('users.tokens.sure') : translate('users.tokens.revoke')}
+ </Button>
+ )}
+ </td>
+ </tr>
+ );
}
import Modal from '../../../components/controls/Modal';
import { ResetButtonLink } from '../../../components/controls/buttons';
import { translate } from '../../../helpers/l10n';
-import { useInvalidateUsersList } from '../../../queries/users';
import { RestUserDetailed } from '../../../types/users';
import TokensForm from './TokensForm';
}
export default function TokensFormModal(props: Props) {
- const [hasTokenCountChanged, setHasTokenCountChanged] = React.useState(false);
- const invalidateUserList = useInvalidateUsersList();
-
- const handleClose = () => {
- if (hasTokenCountChanged) {
- invalidateUserList();
- }
- props.onClose();
- };
+ const { user } = props;
return (
- <Modal size="large" contentLabel={translate('users.tokens')} onRequestClose={handleClose}>
+ <Modal size="large" contentLabel={translate('users.tokens')} onRequestClose={props.onClose}>
<header className="modal-head">
<h2>
<FormattedMessage
defaultMessage={translate('users.user_X_tokens')}
id="users.user_X_tokens"
- values={{ user: <em>{props.user.name}</em> }}
+ values={{ user: <em>{user.name}</em> }}
/>
</h2>
</header>
<div className="modal-body modal-container">
- <TokensForm
- deleteConfirmation="inline"
- login={props.user.login}
- updateTokensCount={() => setHasTokenCountChanged(true)}
- displayTokenTypeInput={false}
- />
+ <TokensForm deleteConfirmation="inline" login={user.login} displayTokenTypeInput={false} />
</div>
<footer className="modal-foot">
- <ResetButtonLink onClick={handleClose}>{translate('done')}</ResetButtonLink>
+ <ResetButtonLink onClick={props.onClose}>{translate('done')}</ResetButtonLink>
</footer>
</Modal>
);
import BulletListIcon from '../../../components/icons/BulletListIcon';
import DateFromNow from '../../../components/intl/DateFromNow';
import LegacyAvatar from '../../../components/ui/LegacyAvatar';
+import Spinner from '../../../components/ui/Spinner';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { useUserGroupsCountQuery, useUserTokensQuery } from '../../../queries/users';
import { IdentityProvider } from '../../../types/types';
import { RestUserDetailed } from '../../../types/users';
import GroupsForm from './GroupsForm';
const {
name,
login,
- groupsCount,
- tokensCount,
avatar,
sonarQubeLastConnectionDate,
sonarLintLastConnectionDate,
const [openTokenForm, setOpenTokenForm] = React.useState(false);
const [openGroupForm, setOpenGroupForm] = React.useState(false);
+ const { data: tokens, isLoading: tokensAreLoading } = useUserTokensQuery(login);
+ const { data: groupsCount, isLoading: groupsAreLoading } = useUserGroupsCountQuery(login);
return (
<tr>
<DateFromNow date={sonarLintLastConnectionDate ?? ''} hourPrecision />
</td>
<td className="thin nowrap text-middle">
- {groupsCount}
- {manageProvider === undefined && (
+ <Spinner loading={groupsAreLoading}>
+ {groupsCount}
+ {manageProvider === undefined && (
+ <ButtonIcon
+ aria-label={translateWithParameters('users.update_users_groups', user.login)}
+ className="js-user-groups spacer-left button-small"
+ onClick={() => setOpenGroupForm(true)}
+ tooltip={translate('users.update_groups')}
+ >
+ <BulletListIcon />
+ </ButtonIcon>
+ )}
+ </Spinner>
+ </td>
+ <td className="thin nowrap text-middle">
+ <Spinner loading={tokensAreLoading}>
+ {tokens?.length}
<ButtonIcon
- aria-label={translateWithParameters('users.update_users_groups', user.login)}
- className="js-user-groups spacer-left button-small"
- onClick={() => setOpenGroupForm(true)}
- tooltip={translate('users.update_groups')}
+ className="js-user-tokens spacer-left button-small"
+ onClick={() => setOpenTokenForm(true)}
+ tooltip={translateWithParameters('users.update_tokens')}
+ aria-label={translateWithParameters('users.update_tokens_for_x', name ?? login)}
>
<BulletListIcon />
</ButtonIcon>
- )}
- </td>
- <td className="thin nowrap text-middle">
- {tokensCount}
- <ButtonIcon
- className="js-user-tokens spacer-left button-small"
- onClick={() => setOpenTokenForm(true)}
- tooltip={translateWithParameters('users.update_tokens')}
- aria-label={translateWithParameters('users.update_tokens_for_x', name ?? login)}
- >
- <BulletListIcon />
- </ButtonIcon>
+ </Spinner>
</td>
<td className="thin nowrap text-right text-middle">
sonarQubeLastConnectionDate: null,
sonarLintLastConnectionDate: null,
scmAccounts: [],
- tokensCount: 0,
- groupsCount: 0,
avatar: 'buzzonthemoon',
...overrides,
};
QueryFunctionContext,
useMutation,
useQueries,
+ useQuery,
useQueryClient,
} from '@tanstack/react-query';
import { range } from 'lodash';
-import { deleteUser, getUsers, postUser, updateUser } from '../api/users';
+import { generateToken, getTokens, revokeToken } from '../api/user-tokens';
+import { addUserToGroup, removeUserFromGroup } from '../api/user_groups';
+import { deleteUser, getUserGroups, getUsers, postUser, updateUser } from '../api/users';
+import { UserToken } from '../types/token';
import { RestUserBase } from '../types/users';
const STALE_TIME = 4 * 60 * 1000;
);
}
-export function useInvalidateUsersList() {
- const queryClient = useQueryClient();
+export function useUserTokensQuery(login: string) {
+ return useQuery({
+ queryKey: ['user', login, 'tokens'],
+ queryFn: () => getTokens(login),
+ staleTime: STALE_TIME,
+ });
+}
- return () => queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
+export function useUserGroupsCountQuery(login: string) {
+ return useQuery({
+ queryKey: ['user', login, 'groups', 'total'],
+ queryFn: () => getUserGroups({ login, ps: 1 }).then((r) => r.paging.total),
+ staleTime: STALE_TIME,
+ });
}
export function usePostUserMutation() {
const queryClient = useQueryClient();
return useMutation({
- mutationFn: async (data: Parameters<typeof postUser>[0]) => {
- await postUser(data);
- },
+ mutationFn: (data: Parameters<typeof postUser>[0]) => postUser(data),
onSuccess() {
queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
},
const queryClient = useQueryClient();
return useMutation({
- mutationFn: async (data: Parameters<typeof updateUser>[0]) => {
- await updateUser(data);
- },
+ mutationFn: (data: Parameters<typeof updateUser>[0]) => updateUser(data),
onSuccess() {
queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
},
const queryClient = useQueryClient();
return useMutation({
- mutationFn: async (data: Parameters<typeof deleteUser>[0]) => {
- await deleteUser(data);
- },
+ mutationFn: (data: Parameters<typeof deleteUser>[0]) => deleteUser(data),
onSuccess() {
queryClient.invalidateQueries({ queryKey: ['user', 'list'] });
},
});
}
+
+export function useGenerateTokenMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (data: Parameters<typeof generateToken>[0] & { projectName?: string }) =>
+ generateToken(data),
+ onSuccess(data, variables) {
+ queryClient.setQueryData<UserToken[]>(['user', data.login, 'tokens'], (oldData) => {
+ const newData = {
+ ...data,
+ project:
+ variables.projectKey && variables.projectName
+ ? { key: variables.projectKey, name: variables.projectName }
+ : undefined,
+ };
+ return oldData ? [...oldData, newData] : [newData];
+ });
+ },
+ });
+}
+
+export function useRevokeTokenMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (data: Parameters<typeof revokeToken>[0]) => revokeToken(data),
+ onSuccess(_, data) {
+ queryClient.setQueryData<UserToken[]>(['user', data.login, 'tokens'], (oldData) =>
+ oldData ? oldData.filter((token) => token.name !== data.name) : undefined
+ );
+ },
+ });
+}
+
+export function useAddUserToGroupMutation() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (data: Parameters<typeof addUserToGroup>[0]) => addUserToGroup(data),
+ onSuccess(_, data) {
+ queryClient.setQueryData<number>(['user', data.login, 'groups', 'total'], (oldData) =>
+ oldData !== undefined ? oldData + 1 : undefined
+ );
+ },
+ });
+}
+
+export function useRemoveUserToGroupMutation() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (data: Parameters<typeof removeUserFromGroup>[0]) => removeUserFromGroup(data),
+ onSuccess(_, data) {
+ queryClient.setQueryData<number>(['user', data.login, 'groups', 'total'], (oldData) =>
+ oldData !== undefined ? oldData - 1 : undefined
+ );
+ },
+ });
+}
sonarQubeLastConnectionDate: string | null;
sonarLintLastConnectionDate: string | null;
scmAccounts: string[];
- groupsCount: number;
- tokensCount: number;
}
export const enum ChangePasswordResults {
projects / sonarqube.git / commitdiff