import com.codeborne.selenide.Condition;
import com.codeborne.selenide.Selenide;
import com.codeborne.selenide.SelenideElement;
-import org.openqa.selenium.By;
public class LoginPage {
public LoginPage submitWrongCredentials(String login, String password) {
Selenide.$("#login").val(login);
Selenide.$("#password").val(password);
- Selenide.$(By.name("commit")).click();
+ Selenide.$("[type=submit]").click();
return Selenide.page(LoginPage.class);
}
private static <T> T submitCredentials(String login, String password, Class<T> expectedResultPage) {
Selenide.$("#login").val(login);
Selenide.$("#password").val(password);
- Selenide.$(By.name("commit")).click();
+ Selenide.$("[type=submit]").click();
Selenide.$("#login").should(Condition.disappear);
return Selenide.page(expectedResultPage);
}
}
export function getProfileInheritance(profileKey: string): Promise<any> {
- return getJSON('/api/qualityprofiles/inheritance', { profileKey });
+ return getJSON('/api/qualityprofiles/inheritance', { profileKey }).catch(throwGlobalError);
}
export function setDefaultProfile(profileKey: string): Promise<void> {
return post('/api/qualityprofiles/change_parent', { profileKey, parentKey });
}
-export function getImporters(): Promise<any> {
- return getJSON('/api/qualityprofiles/importers').then(r => r.importers);
+export function getImporters(): Promise<
+ Array<{ key: string; languages: Array<string>; name: string }>
+> {
+ return getJSON('/api/qualityprofiles/importers').then(r => r.importers, throwGlobalError);
}
export function getExporters(): Promise<any> {
import { FormattedMessage } from 'react-intl';
import NavBarNotif from '../../../../components/nav/NavBarNotif';
import RestartForm from '../../../../components/common/RestartForm';
+import { Button } from '../../../../components/ui/buttons';
import { dismissErrorMessage, Edition, EditionStatus } from '../../../../api/marketplace';
import { translate, translateWithParameters } from '../../../../helpers/l10n';
url: (
<a
href="https://redirect.sonarsource.com/doc/data-center-edition.html"
+ rel="noopener noreferrer"
target="_blank">
{edition.name}
</a>
</span>
)}
{!preventRestart && (
- <button className="js-restart spacer-left" onClick={this.handleOpenRestart} type="button">
+ <Button className="js-restart spacer-left" onClick={this.handleOpenRestart}>
{translate('marketplace.restart')}
- </button>
+ </Button>
)}
{!preventRestart &&
this.state.openRestart && <RestartForm onClose={this.hanleCloseRestart} />}
<span>
marketplace.edition_status.AUTOMATIC_READY
</span>
- <button
+ <Button
className="js-restart spacer-left"
onClick={[Function]}
- type="button"
>
marketplace.restart
- </button>
+ </Button>
</NavBarNotif>
`;
import { Organization } from '../../../app/types';
import Modal from '../../../components/controls/Modal';
import { translate } from '../../../helpers/l10n';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface DispatchProps {
createOrganization: (fields: Partial<Organization>) => Promise<{ key: string }>;
<em className="mandatory">*</em>
</label>
<input
- id="organization-name"
autoFocus={true}
+ disabled={this.state.loading}
+ id="organization-name"
+ maxLength={64}
+ minLength={2}
name="name"
+ onChange={this.handleNameChange}
required={true}
type="text"
- minLength={2}
- maxLength={64}
value={this.state.name}
- disabled={this.state.loading}
- onChange={this.handleNameChange}
/>
<div className="modal-field-description">
{translate('organization.name.description')}
<div className="modal-field">
<label htmlFor="organization-key">{translate('organization.key')}</label>
<input
+ disabled={this.state.loading}
id="organization-key"
+ maxLength={64}
+ minLength={2}
name="key"
+ onChange={this.handleKeyChange}
type="text"
- minLength={2}
- maxLength={64}
value={this.state.key}
- disabled={this.state.loading}
- onChange={this.handleKeyChange}
/>
<div className="modal-field-description">
{translate('organization.key.description')}
<div className="modal-field">
<label htmlFor="organization-avatar">{translate('organization.avatar')}</label>
<input
+ disabled={this.state.loading}
id="organization-avatar"
+ maxLength={256}
name="avatar"
+ onChange={this.handleAvatarInputChange}
type="text"
- maxLength={256}
value={this.state.avatar}
- disabled={this.state.loading}
- onChange={this.handleAvatarInputChange}
/>
<div className="modal-field-description">
{translate('organization.avatar.description')}
{translate('organization.avatar.preview')}
{':'}
</div>
- <img src={this.state.avatarImage} alt="" height={30} />
+ <img alt="" height={30} src={this.state.avatarImage} />
</div>
)}
</div>
<div className="modal-field">
<label htmlFor="organization-description">{translate('description')}</label>
<textarea
+ disabled={this.state.loading}
id="organization-description"
+ maxLength={256}
name="description"
+ onChange={this.handleDescriptionChange}
rows={3}
- maxLength={256}
value={this.state.description}
- disabled={this.state.loading}
- onChange={this.handleDescriptionChange}
/>
<div className="modal-field-description">
{translate('organization.description.description')}
<div className="modal-field">
<label htmlFor="organization-url">{translate('organization.url')}</label>
<input
+ disabled={this.state.loading}
id="organization-url"
+ maxLength={256}
name="url"
+ onChange={this.handleUrlChange}
type="text"
- maxLength={256}
value={this.state.url}
- disabled={this.state.loading}
- onChange={this.handleUrlChange}
/>
<div className="modal-field-description">
{translate('organization.url.description')}
<footer className="modal-foot">
<div>
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={this.state.loading} type="submit">
- {translate('create')}
- </button>
- <button className="button-link" onClick={this.props.onClose} type="reset">
- {translate('cancel')}
- </button>
+ <SubmitButton disabled={this.state.loading}>{translate('create')}</SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</div>
</footer>
</form>
import { translate } from '../../../helpers/l10n';
import { getAppState, getMyOrganizations, getGlobalSettingValue } from '../../../store/rootReducer';
import { Organization } from '../../../app/types';
+import { Button } from '../../../components/ui/buttons';
interface StateProps {
anyoneCanCreate?: { value: string };
}
};
- openCreateOrganizationForm = () => this.setState({ createOrganization: true });
-
- closeCreateOrganizationForm = () => this.setState({ createOrganization: false });
-
- handleCreateClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.openCreateOrganizationForm();
+ openCreateOrganizationForm = () => {
+ this.setState({ createOrganization: true });
};
- handleCreate = () => {
- this.closeCreateOrganizationForm();
+ closeCreateOrganizationForm = () => {
+ this.setState({ createOrganization: false });
};
render() {
{canCreateOrganizations && (
<div className="clearfix">
<div className="boxed-group-actions">
- <button onClick={this.handleCreateClick}>{translate('create')}</button>
+ <Button onClick={this.openCreateOrganizationForm}>{translate('create')}</Button>
</div>
</div>
)}
{this.state.createOrganization && (
<CreateOrganizationForm
onClose={this.closeCreateOrganizationForm}
- onCreate={this.handleCreate}
+ onCreate={this.closeCreateOrganizationForm}
/>
)}
</div>
import { setWorkerCount } from '../../../api/ce';
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
const MAX_WORKERS = 10;
this.mounted = false;
}
- handleClose = () => this.props.onClose();
+ handleClose = () => {
+ this.props.onClose();
+ };
handleWorkerCountChange = (option: { value: number }) =>
this.setState({ newWorkerCount: option.value });
<footer className="modal-foot">
<div>
{this.state.submitting && <i className="spinner spacer-right" />}
- <button disabled={this.state.submitting} type="submit">
- {translate('save')}
- </button>
- <button type="reset" className="button-link" onClick={this.handleClose}>
- {translate('cancel')}
- </button>
+ <SubmitButton disabled={this.state.submitting}>{translate('save')}</SubmitButton>
+ <ResetButtonLink onClick={this.handleClose}>{translate('cancel')}</ResetButtonLink>
</div>
</footer>
</form>
className="modal-foot"
>
<div>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
save
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</div>
</footer>
</form>
className="modal-foot"
>
<div>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
save
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</div>
</footer>
</form>
import ActivationFormModal from './ActivationFormModal';
import { Profile as BaseProfile } from '../../../api/quality-profiles';
import { Rule, RuleDetails, RuleActivation } from '../../../app/types';
+import { Button } from '../../../components/ui/buttons';
interface Props {
activation?: RuleActivation;
this.mounted = false;
}
- handleButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleButtonClick = () => {
this.setState({ modal: true });
};
- handleCloseModal = () => this.setState({ modal: false });
+ handleCloseModal = () => {
+ this.setState({ modal: false });
+ };
render() {
return (
<>
- <button
+ <Button
className={this.props.className}
id="coding-rules-quality-profile-activate"
onClick={this.handleButtonClick}>
{this.props.buttonText}
- </button>
+ </Button>
{this.state.modal && (
<ActivationFormModal
import { SEVERITIES } from '../../../helpers/constants';
import { translate } from '../../../helpers/l10n';
import { sortProfiles } from '../../quality-profiles/utils';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
activation?: RuleActivation;
};
// Choose QP which a user can administrate, which are the same language and which are not built-in
- getQualityProfilesWithDepth = ({ profiles } = this.props) =>
- sortProfiles(
+ getQualityProfilesWithDepth = ({ profiles } = this.props) => {
+ return sortProfiles(
profiles.filter(
profile =>
!profile.isBuiltIn &&
// Decrease depth by 1, so the top level starts at 0
depth: profile.depth - 1
}));
-
- handleCancelClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onClose();
};
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
this.setState((state: State) => ({ params: { ...state.params, [name]: value } }));
};
- handleProfileChange = ({ value }: { value: string }) => this.setState({ profile: value });
+ handleProfileChange = ({ value }: { value: string }) => {
+ this.setState({ profile: value });
+ };
- handleSeverityChange = ({ value }: { value: string }) => this.setState({ severity: value });
+ handleSeverityChange = ({ value }: { value: string }) => {
+ this.setState({ severity: value });
+ };
- renderSeverityOption = ({ value }: { value: string }) => <SeverityHelper severity={value} />;
+ renderSeverityOption = ({ value }: { value: string }) => {
+ return <SeverityHelper severity={value} />;
+ };
render() {
const { activation, rule } = this.props;
clearable={false}
disabled={submitting}
onChange={this.handleSeverityChange}
+ optionRenderer={this.renderSeverityOption}
options={SEVERITIES.map(severity => ({
label: translate('severity', severity),
value: severity
}))}
- optionRenderer={this.renderSeverityOption}
searchable={false}
value={severity}
valueRenderer={this.renderSeverityOption}
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
- <button disabled={submitting || activeInAllProfiles} type="submit">
+ <SubmitButton disabled={submitting || activeInAllProfiles}>
{isUpdateMode ? translate('save') : translate('coding_rules.activate')}
- </button>
- <button
- className="button-link"
- disabled={submitting}
- onClick={this.handleCancelClick}
- type="reset">
+ </SubmitButton>
+ <ResetButtonLink disabled={submitting} onClick={this.props.onClose}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
import { Query } from '../query';
import { Profile } from '../../../api/quality-profiles';
import Dropdown from '../../../components/controls/Dropdown';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
this.closeDropdown = closeDropdown;
return (
<div className={classNames('pull-left dropdown', { open })}>
- <button className="js-bulk-change" onClick={onToggleClick}>
+ <Button className="js-bulk-change" onClick={onToggleClick}>
{translate('bulk_change')}
- </button>
+ </Button>
<ul className="dropdown-menu">
<li>
<a href="#" onClick={this.handleActivateClick}>
import Select from '../../../components/controls/Select';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { formatMeasure } from '../../../helpers/measures';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
action: string;
this.mounted = false;
}
- handleCloseClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onClose();
- };
-
handleProfileSelect = (options: { value: string }[]) => {
const selectedProfiles = options.map(option => option.value);
this.setState({ selectedProfiles });
<footer className="modal-foot">
{this.state.submitting && <i className="spinner spacer-right" />}
{!this.state.finished && (
- <button
- disabled={this.state.submitting}
- id="coding-rules-submit-bulk-change"
- type="submit">
+ <SubmitButton disabled={this.state.submitting} id="coding-rules-submit-bulk-change">
{translate('apply')}
- </button>
+ </SubmitButton>
)}
- <button className="button-link" onClick={this.handleCloseClick} type="reset">
+ <ResetButtonLink onClick={this.props.onClose}>
{this.state.finished ? translate('close') : translate('cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
import { RuleDetails } from '../../../app/types';
interface Props {
- children: (
- props: { onClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void }
- ) => React.ReactNode;
+ children: (props: { onClick: () => void }) => React.ReactNode;
customRule?: RuleDetails;
onDone: (newRuleDetails: RuleDetails) => void;
organization: string | undefined;
this.mounted = false;
}
- handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleClick = () => {
this.setState({ modal: true });
};
import SeverityHelper from '../../../components/shared/SeverityHelper';
import { createRule, updateRule } from '../../../api/rules';
import { csvEscape } from '../../../helpers/csv';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
customRule?: RuleDetails;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onClose();
- };
-
prepareRequest = () => {
/* eslint-disable camelcase */
const { customRule, organization, templateRule } = this.props;
clearable={false}
disabled={this.state.submitting}
onChange={this.handleTypeChange}
+ optionRenderer={this.renderTypeOption}
options={TYPES.map(type => ({
label: translate('issue.type', type),
value: type
}))}
- optionRenderer={this.renderTypeOption}
searchable={false}
value={this.state.type}
valueRenderer={this.renderTypeOption}
clearable={false}
disabled={this.state.submitting}
onChange={this.handleSeverityChange}
+ optionRenderer={this.renderSeverityOption}
options={SEVERITIES.map(severity => ({
label: translate('severity', severity),
value: severity
}))}
- optionRenderer={this.renderSeverityOption}
searchable={false}
value={this.state.severity}
valueRenderer={this.renderSeverityOption}
renderSubmitButton = () => {
if (this.state.reactivating) {
return (
- <button
+ <SubmitButton
disabled={this.state.submitting}
- id="coding-rules-custom-rule-creation-reactivate"
- type="submit">
+ id="coding-rules-custom-rule-creation-reactivate">
{translate('coding_rules.reactivate')}
- </button>
+ </SubmitButton>
);
} else {
return (
- <button
+ <SubmitButton
disabled={this.state.submitting}
- id="coding-rules-custom-rule-creation-create"
- type="submit">
+ id="coding-rules-custom-rule-creation-create">
{translate(this.props.customRule ? 'save' : 'create')}
- </button>
+ </SubmitButton>
);
}
};
<div className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
{this.renderSubmitButton()}
- <button
- className="button-link"
+ <ResetButtonLink
disabled={submitting}
id="coding-rules-custom-rule-creation-cancel"
- onClick={this.handleCancelClick}
- type="reset">
+ onClick={this.props.onClose}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
</div>
</form>
</Modal>
*/
import * as React from 'react';
import SimpleModal from '../../../components/controls/SimpleModal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
const header = translate('coding_rules.remove_extended_description');
return (
<SimpleModal header={header} onClose={onCancel} onSubmit={onSubmit}>
- {({ onCloseClick, onSubmitClick, submitting }) => (
- <>
+ {({ onCloseClick, onFormSubmit, submitting }) => (
+ <form onSubmit={onFormSubmit}>
<header className="modal-head">
<h2>{header}</h2>
</header>
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
- <button
+ <SubmitButton
className="button-red"
disabled={submitting}
- id="coding-rules-detail-extend-description-remove-submit"
- onClick={onSubmitClick}>
+ id="coding-rules-detail-extend-description-remove-submit">
{translate('remove')}
- </button>
- <a href="#" onClick={onCloseClick}>
- {translate('cancel')}
- </a>
+ </SubmitButton>
+ <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
</footer>
- </>
+ </form>
)}
</SimpleModal>
);
import { RuleActivation, RuleDetails as IRuleDetails } from '../../../app/types';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import ConfirmButton from '../../../components/controls/ConfirmButton';
+import { Button } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
organization={organization}
templateRule={ruleDetails}>
{({ onClick }) => (
- <button
+ <Button
className="js-edit-custom"
id="coding-rules-detail-custom-rule-change"
onClick={onClick}>
{translate('edit')}
- </button>
+ </Button>
)}
</CustomRuleButton>
<ConfirmButton
modalHeader={translate('coding_rules.delete_rule')}
onConfirm={this.handleDelete}>
{({ onClick }) => (
- <button
+ <Button
className="button-red spacer-left js-delete"
id="coding-rules-detail-rule-delete"
onClick={onClick}>
{translate('delete')}
- </button>
+ </Button>
)}
</ConfirmButton>
</div>
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import ConfirmButton from '../../../components/controls/ConfirmButton';
import SeverityHelper from '../../../components/shared/SeverityHelper';
+import { Button } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { getRuleUrl } from '../../../helpers/urls';
};
renderRule = (rule: Rule) => (
- <tr key={rule.key} data-rule={rule.key}>
+ <tr data-rule={rule.key} key={rule.key}>
<td className="coding-rules-detail-list-name">
<Link to={getRuleUrl(rule.key, this.props.organization)}>{rule.name}</Link>
</td>
modalHeader={translate('coding_rules.delete_rule')}
onConfirm={this.handleRuleDelete}>
{({ onClick }) => (
- <button className="button-red js-delete-custom-rule" onClick={onClick}>
+ <Button className="button-red js-delete-custom-rule" onClick={onClick}>
{translate('delete')}
- </button>
+ </Button>
)}
</ConfirmButton>
</td>
organization={this.props.organization}
templateRule={this.props.ruleDetails}>
{({ onClick }) => (
- <button className="js-create-custom-rule spacer-left" onClick={onClick}>
+ <Button className="js-create-custom-rule spacer-left" onClick={onClick}>
{translate('coding_rules.create')}
- </button>
+ </Button>
)}
</CustomRuleButton>
)}
<DeferredSpinner loading={loading}>
{rules.length > 0 && (
- <table id="coding-rules-detail-custom-rules" className="coding-rules-detail-list">
+ <table className="coding-rules-detail-list" id="coding-rules-detail-custom-rules">
<tbody>{sortBy(rules, rule => rule.name).map(this.renderRule)}</tbody>
</table>
)}
import { updateRule } from '../../../api/rules';
import { RuleDetails } from '../../../app/types';
import MarkdownTips from '../../../components/common/MarkdownTips';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
handleDescriptionChange = (event: React.SyntheticEvent<HTMLTextAreaElement>) =>
this.setState({ description: event.currentTarget.value });
- handleCancelClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleCancelClick = () => {
this.setState({ descriptionForm: false });
};
- handleSaveClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleSaveClick = () => {
this.updateDescription(this.state.description);
};
- handleRemoveDescriptionClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleRemoveDescriptionClick = () => {
this.setState({ removeDescriptionModal: true });
};
);
};
- handleExtendDescriptionClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleExtendDescriptionClick = () => {
this.setState({
// set description` to the current `mdNote` each time the form is open
description: this.props.ruleDetails.mdNote || '',
/>
)}
{this.props.canWrite && (
- <button
+ <Button
id="coding-rules-detail-extend-description"
onClick={this.handleExtendDescriptionClick}>
{translate('coding_rules.extend_description')}
- </button>
+ </Button>
)}
</div>
);
</tr>
<tr>
<td>
- <button
+ <Button
disabled={this.state.submitting}
id="coding-rules-detail-extend-description-submit"
onClick={this.handleSaveClick}>
{translate('save')}
- </button>
+ </Button>
{this.props.ruleDetails.mdNote !== undefined && (
<>
- <button
+ <Button
className="button-red spacer-left"
disabled={this.state.submitting}
id="coding-rules-detail-extend-description-remove"
onClick={this.handleRemoveDescriptionClick}>
{translate('remove')}
- </button>
+ </Button>
{this.state.removeDescriptionModal && (
<RemoveExtendedDescriptionModal
onCancel={this.handleCancelRemoving}
)}
</>
)}
- <button
- className="spacer-left button-link"
+ <ResetButtonLink
+ className="spacer-left"
disabled={this.state.submitting}
id="coding-rules-detail-extend-description-cancel"
onClick={this.handleCancelClick}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
{this.state.submitting && <i className="spinner spacer-left" />}
</td>
<td className="text-right">
import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
import TagsList from '../../../components/tags/TagsList';
import DateFormatter from '../../../components/intl/DateFormatter';
+import { Button } from '../../../components/ui/buttons';
interface Props {
canWrite: boolean | undefined;
export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
state: State = { tagsPopup: false };
- handleTagsClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleTagsClick = () => {
this.setState(state => ({ tagsPopup: !state.tagsPopup }));
};
{this.props.canWrite ? (
<BubblePopupHelper
isOpen={this.state.tagsPopup}
- position="bottomleft"
popup={
<RuleDetailsTagsPopup
organization={this.props.organization}
tags={tags}
/>
}
+ position="bottomleft"
togglePopup={this.handleTagsPopupToggle}>
- <button className="button-link" onClick={this.handleTagsClick}>
+ <Button className="button-link" onClick={this.handleTagsClick}>
<TagsList
allowUpdate={canWrite}
tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
/>
- </button>
+ </Button>
</BubblePopupHelper>
) : (
<TagsList
import BuiltInQualityProfileBadge from '../../quality-profiles/components/BuiltInQualityProfileBadge';
import Tooltip from '../../../components/controls/Tooltip';
import SeverityHelper from '../../../components/shared/SeverityHelper';
+import { Button } from '../../../components/ui/buttons';
interface Props {
activations: RuleActivation[] | undefined;
modalHeader={translate('coding_rules.revert_to_parent_definition')}
onConfirm={this.handleRevert}>
{({ onClick }) => (
- <button
+ <Button
className="coding-rules-detail-quality-profile-revert button-red spacer-left"
onClick={onClick}>
{translate('coding_rules.revert_to_parent_definition')}
- </button>
+ </Button>
)}
</ConfirmButton>
)
modalHeader={translate('coding_rules.deactivate')}
onConfirm={this.handleDeactivate}>
{({ onClick }) => (
- <button
+ <Button
className="coding-rules-detail-quality-profile-deactivate button-red spacer-left"
onClick={onClick}>
{translate('coding_rules.deactivate')}
- </button>
+ </Button>
)}
</ConfirmButton>
)}
const parentActivation = activations.find(x => x.qProfile === profile.parentKey);
return (
- <tr key={profile.key} data-profile={profile.key}>
+ <tr data-profile={profile.key} key={profile.key}>
<td className="coding-rules-detail-quality-profile-name">
<Link to={getQualityProfileUrl(profile.name, profile.language, this.props.organization)}>
{profile.name}
{activations.length > 0 && (
<table
- id="coding-rules-detail-quality-profiles"
- className="coding-rules-detail-quality-profiles width100">
+ className="coding-rules-detail-quality-profiles width100"
+ id="coding-rules-detail-quality-profiles">
<tbody>{activations.map(this.renderActivation)}</tbody>
</table>
)}
import ConfirmButton from '../../../components/controls/ConfirmButton';
import Tooltip from '../../../components/controls/Tooltip';
import SeverityIcon from '../../../components/shared/SeverityIcon';
+import { Button } from '../../../components/ui/buttons';
import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
import { translate, translateWithParameters } from '../../../helpers/l10n';
modalHeader={translate('coding_rules.deactivate')}
onConfirm={this.handleDeactivate}>
{({ onClick }) => (
- <button
+ <Button
className="coding-rules-detail-quality-profile-deactivate button-red"
onClick={onClick}>
{translate('coding_rules.deactivate')}
- </button>
+ </Button>
)}
</ConfirmButton>
) : (
<Tooltip overlay={translate('coding_rules.can_not_deactivate')} placement="left">
- <button className="coding-rules-detail-quality-profile-deactivate button-red disabled">
+ <Button className="coding-rules-detail-quality-profile-deactivate button-red disabled">
{translate('coding_rules.deactivate')}
- </button>
+ </Button>
</Tooltip>
);
};
*/
import * as React from 'react';
import Form from './Form';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
render() {
return (
<>
- <button id="custom-measures-create" onClick={this.handleClick} type="button">
+ <Button id="custom-measures-create" onClick={this.handleClick}>
{translate('create')}
- </button>
+ </Button>
{this.state.modal && (
<Form
confirmButtonText={translate('create')}
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import Select from '../../../components/controls/Select';
import SimpleModal from '../../../components/controls/SimpleModal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
- <button
+ <SubmitButton
disabled={forbidSubmitting || submitting}
- id="create-custom-measure-submit"
- type="submit">
+ id="create-custom-measure-submit">
{this.props.confirmButtonText}
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={submitting}
id="create-custom-measure-cancel"
- onClick={onCloseClick}
- type="reset">
+ onClick={onCloseClick}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
)}
expect(onClose).toBeCalled();
onClose.mockClear();
- click(form.find('button[type="reset"]'));
+ click(form.find('ResetButtonLink'));
expect(onClose).toBeCalled();
});
exports[`should create new custom measure 1`] = `
<React.Fragment>
- <button
+ <Button
id="custom-measures-create"
onClick={[Function]}
- type="button"
>
create
- </button>
+ </Button>
</React.Fragment>
`;
exports[`should create new custom measure 2`] = `
<React.Fragment>
- <button
+ <Button
id="custom-measures-create"
onClick={[Function]}
- type="button"
>
create
- </button>
+ </Button>
<Form
confirmButtonText="create"
header="custom_measures.create_custom_measure"
loading={false}
timeout={100}
/>
- <button
+ <SubmitButton
disabled={true}
id="create-custom-measure-submit"
- type="submit"
>
confirmButtonText
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={false}
id="create-custom-measure-cancel"
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
loading={false}
timeout={100}
/>
- <button
+ <SubmitButton
disabled={false}
id="create-custom-measure-submit"
- type="submit"
>
confirmButtonText
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={false}
id="create-custom-measure-cancel"
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
*/
import * as React from 'react';
import Form, { MetricProps } from './Form';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
render() {
return (
<>
- <button id="metrics-create" onClick={this.handleClick}>
+ <Button id="metrics-create" onClick={this.handleClick}>
{translate('custom_metrics.create_metric')}
- </button>
+ </Button>
{this.state.modal && (
<Form
confirmButtonText={translate('create')}
import SimpleModal from '../../../components/controls/SimpleModal';
import { translate } from '../../../helpers/l10n';
import Select, { Creatable } from '../../../components/controls/Select';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
export interface MetricProps {
description: string;
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
- <button disabled={submitting} id="create-metric-submit" type="submit">
+ <SubmitButton disabled={submitting} id="create-metric-submit">
{this.props.confirmButtonText}
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={submitting}
id="create-metric-cancel"
- onClick={onCloseClick}
- type="reset">
+ onClick={onCloseClick}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
)}
expect(onClose).toBeCalled();
onClose.mockClear();
- click(wrapper.find('button[type="reset"]'));
+ click(wrapper.find('ResetButtonLink'));
expect(onClose).toBeCalled();
});
exports[`should create new group 1`] = `
<React.Fragment>
- <button
+ <Button
id="metrics-create"
onClick={[Function]}
>
custom_metrics.create_metric
- </button>
+ </Button>
</React.Fragment>
`;
exports[`should create new group 2`] = `
<React.Fragment>
- <button
+ <Button
id="metrics-create"
onClick={[Function]}
>
custom_metrics.create_metric
- </button>
+ </Button>
<Form
confirmButtonText="create"
domains={
loading={false}
timeout={100}
/>
- <button
+ <SubmitButton
disabled={false}
id="create-metric-submit"
- type="submit"
>
confirmButtonText
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={false}
id="create-metric-cancel"
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
import Modal from '../../../components/controls/Modal';
import BulletListIcon from '../../../components/icons-components/BulletListIcon';
import SelectList from '../../../components/SelectList';
-import { ButtonIcon } from '../../../components/ui/buttons';
+import { ButtonIcon, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
import { getBaseUrl } from '../../../helpers/urls';
}
};
- handleCloseClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.handleModalClose();
- };
-
renderSelectList = () => {
if (this.container) {
const extra = { name: this.props.group.name, organization: this.props.organization };
</div>
<footer className="modal-foot">
- <button className="button-link" onClick={this.handleCloseClick} type="reset">
- {translate('Done')}
- </button>
+ <ResetButtonLink onClick={this.handleModalClose}>{translate('Done')}</ResetButtonLink>
</footer>
</Modal>
)}
import { Group } from '../../../app/types';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import SimpleModal from '../../../components/controls/SimpleModal';
+import { ResetButtonLink, SubmitButton } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
- <button disabled={submitting} type="submit">
- {this.props.confirmButtonText}
- </button>
- <button className="button-link" onClick={onCloseClick} type="reset">
- {translate('cancel')}
- </button>
+ <SubmitButton disabled={submitting}>{this.props.confirmButtonText}</SubmitButton>
+ <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
)}
import * as React from 'react';
import Form from './Form';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleCreateClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleCreateClick = () => {
this.setState({ createModal: true });
};
<DeferredSpinner loading={this.props.loading} />
<div className="page-actions">
- <button id="groups-create" onClick={this.handleCreateClick}>
+ <Button id="groups-create" onClick={this.handleCreateClick}>
{translate('groups.create_group')}
- </button>
+ </Button>
</div>
<p className="page-description">{translate('user_groups.page.description')}</p>
<EditGroup group={group} onEdit={onEdit}>
{props => {
({ onClick } = props);
- return <button />;
+ return <div />;
}}
</EditGroup>
);
const wrapper = shallow(<EditMembers group={group} onEdit={onEdit} organization="org" />);
expect(wrapper).toMatchSnapshot();
- wrapper.find('ButtonIcon').prop<Function>('onClick')();
- wrapper.update();
+ click(wrapper.find('ButtonIcon'));
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button[type="reset"]'));
+ click(wrapper.find('ResetButtonLink'));
expect(onEdit).toBeCalled();
expect(wrapper).toMatchSnapshot();
});
expect(onClose).toBeCalled();
onClose.mockClear();
- click(wrapper.find('button[type="reset"]'));
+ click(wrapper.find('ResetButtonLink'));
expect(onClose).toBeCalled();
});
const wrapper = shallow(<Header loading={false} onCreate={onCreate} />);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('#groups-create'));
+ click(wrapper.find('[id="groups-create"]'));
expect(wrapper).toMatchSnapshot();
wrapper.find('Form').prop<Function>('onSubmit')({ name: 'foo', description: 'bar' });
exports[`should edit group 1`] = `
<React.Fragment>
- <button />
+ <div />
</React.Fragment>
`;
exports[`should edit group 2`] = `
<React.Fragment>
- <button />
+ <div />
<Form
confirmButtonText="update_verb"
group={
exports[`should edit group 3`] = `
<React.Fragment>
- <button />
+ <div />
</React.Fragment>
`;
<footer
className="modal-foot"
>
- <button
- className="button-link"
+ <ResetButtonLink
onClick={[Function]}
- type="reset"
>
Done
- </button>
+ </ResetButtonLink>
</footer>
</Modal>
</React.Fragment>
loading={false}
timeout={100}
/>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
confirmButtonText
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[Function]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<div
className="page-actions"
>
- <button
+ <Button
id="groups-create"
onClick={[Function]}
>
groups.create_group
- </button>
+ </Button>
</div>
<p
className="page-description"
<div
className="page-actions"
>
- <button
+ <Button
id="groups-create"
onClick={[Function]}
>
groups.create_group
- </button>
+ </Button>
</div>
<p
className="page-description"
import { getMigrationStatus, getSystemStatus, migrateDatabase } from '../../../api/system';
import DateFromNow from '../../../components/intl/DateFromNow';
import TimeFormatter from '../../../components/intl/TimeFormatter';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
import { getBaseUrl } from '../../../helpers/urls';
import '../styles.css';
}, 2500);
};
- handleMigrateClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleMigrateClick = () => {
migrateDatabase().then(
({ message, startedAt, state }) => {
if (this.mounted) {
<p className="maintenance-text">{translate('maintenance.upgrade_database.2')}</p>
<p className="maintenance-text">{translate('maintenance.upgrade_database.3')}</p>
<div className="maintenance-spinner">
- <button id="start-migration" onClick={this.handleMigrateClick} type="button">
+ <Button id="start-migration" onClick={this.handleMigrateClick}>
{translate('maintenance.upgrade')}
- </button>
+ </Button>
</div>
</>
)}
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(migrateDatabase).toBeCalled();
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
<div
className="maintenance-spinner"
>
- <button
+ <Button
id="start-migration"
onClick={[Function]}
- type="button"
>
maintenance.upgrade
- </button>
+ </Button>
</div>
</React.Fragment>
</div>
import { FormattedMessage } from 'react-intl';
import RestartForm from '../../components/common/RestartForm';
import { cancelPendingPlugins, PluginPending } from '../../api/plugins';
+import { Button } from '../../components/ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
export default class PendingActions extends React.PureComponent<Props, State> {
state: State = { openRestart: false };
- handleOpenRestart = () => this.setState({ openRestart: true });
- hanleCloseRestart = () => this.setState({ openRestart: false });
+ handleOpenRestart = () => {
+ this.setState({ openRestart: true });
+ };
+
+ hanleCloseRestart = () => {
+ this.setState({ openRestart: false });
+ };
handleRevert = () => {
cancelPendingPlugins().then(this.props.refreshPending, () => {});
</ul>
</div>
<div className="pull-right">
- <button className="js-restart little-spacer-right" onClick={this.handleOpenRestart}>
+ <Button className="js-restart little-spacer-right" onClick={this.handleOpenRestart}>
{translate('marketplace.restart')}
- </button>
- <button className="js-cancel-all button-red" onClick={this.handleRevert}>
+ </Button>
+ <Button className="js-cancel-all button-red" onClick={this.handleRevert}>
{translate('marketplace.revert')}
- </button>
+ </Button>
</div>
{this.state.openRestart && <RestartForm onClose={this.hanleCloseRestart} />}
</div>
<div
className="pull-right"
>
- <button
+ <Button
className="js-restart little-spacer-right"
onClick={[Function]}
>
marketplace.restart
- </button>
- <button
+ </Button>
+ <Button
className="js-cancel-all button-red"
onClick={[Function]}
>
marketplace.revert
- </button>
+ </Button>
</div>
</div>
`;
import * as React from 'react';
import EditionBoxBadge from './EditionBoxBadge';
import { Edition, EditionStatus } from '../../../api/marketplace';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
}
export default class EditionBox extends React.PureComponent<Props> {
- handleAction = () => this.props.onAction(this.props.edition);
+ handleAction = () => {
+ this.props.onAction(this.props.edition);
+ };
render() {
const { disableAction, displayAction, edition, editionStatus } = this.props;
{translate('marketplace.learn_more')}
</a>
{displayAction && (
- <button disabled={disableAction} onClick={this.handleAction}>
+ <Button disabled={disableAction} onClick={this.handleAction}>
{this.props.actionLabel}
- </button>
+ </Button>
)}
</div>
</div>
import LicenseEditionSet from './LicenseEditionSet';
import { Edition, EditionStatus, applyLicense } from '../../../api/marketplace';
import Modal from '../../../components/controls/Modal';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
export interface Props {
}
};
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
- handleConfirmClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
+ handleConfirmClick = () => {
const { license, status } = this.state;
if (license && status) {
this.setState({ submitting: true });
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
{status && (
- <button
+ <Button
className="js-confirm"
- onClick={this.handleConfirmClick}
- disabled={!license || submitting}>
+ disabled={!license || submitting}
+ onClick={this.handleConfirmClick}>
{status === 'AUTOMATIC_INSTALL'
? translate('marketplace.install')
: translate('save')}
- </button>
+ </Button>
)}
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</Modal>
);
*/
import * as React from 'react';
import PluginUpdateButton from './PluginUpdateButton';
+import { isPluginAvailable, isPluginInstalled } from '../utils';
+import { Plugin, installPlugin, updatePlugin, uninstallPlugin } from '../../../api/plugins';
import Checkbox from '../../../components/controls/Checkbox';
import CheckIcon from '../../../components/icons-components/CheckIcon';
-import { Plugin, installPlugin, updatePlugin, uninstallPlugin } from '../../../api/plugins';
-import { isPluginAvailable, isPluginInstalled } from '../utils';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
update={update}
/>
))}
- <button
+ <Button
className="js-uninstall button-red little-spacer-left"
disabled={loading}
- onClick={this.handleUninstall}
- type="button">
+ onClick={this.handleUninstall}>
{translate('marketplace.uninstall')}
- </button>
+ </Button>
</div>
)}
{isPluginAvailable(plugin) && (
- <button
+ <Button
className="js-install"
disabled={loading || (plugin.termsAndConditionsUrl != null && !this.state.acceptTerms)}
- onClick={this.handleInstall}
- type="button">
+ onClick={this.handleInstall}>
{translate('marketplace.install')}
- </button>
+ </Button>
)}
</div>
);
*/
import * as React from 'react';
import PluginChangeLog from './PluginChangeLog';
-import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
import { Release, Update } from '../../../api/plugins';
+import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
+import { Button } from '../../../components/ui/buttons';
interface Props {
release: Release;
export default class PluginChangeLogButton extends React.PureComponent<Props, State> {
state: State = { changelogOpen: false };
- handleChangelogClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.stopPropagation();
- this.toggleChangelog();
- };
-
toggleChangelog = (show?: boolean) => {
if (show !== undefined) {
this.setState({ changelogOpen: show });
}
};
+ handleClick = () => {
+ this.toggleChangelog();
+ };
+
render() {
return (
<div className="display-inline-block little-spacer-left">
- <button
+ <Button
className="button-link js-changelog issue-rule icon-ellipsis-h"
- onClick={this.handleChangelogClick}
+ onClick={this.handleClick}
/>
<BubblePopupHelper
isOpen={this.state.changelogOpen}
- position="bottomright"
popup={<PluginChangeLog release={this.props.release} update={this.props.update} />}
+ position="bottomright"
togglePopup={this.toggleChangelog}
/>
</div>
*/
import * as React from 'react';
import { Update } from '../../../api/plugins';
+import { Button } from '../../../components/ui/buttons';
import { translateWithParameters } from '../../../helpers/l10n';
interface Props {
}
export default class PluginUpdateButton extends React.PureComponent<Props> {
- handleClick = () => this.props.onClick(this.props.update);
+ handleClick = () => {
+ this.props.onClick(this.props.update);
+ };
render() {
const { disabled, update } = this.props;
return null;
}
return (
- <button
+ <Button
className="js-update little-spacer-bottom"
disabled={disabled}
- onClick={this.handleClick}
- type="button">
+ onClick={this.handleClick}>
{translateWithParameters('marketplace.update_to_x', update.release.version)}
- </button>
+ </Button>
);
}
}
import * as React from 'react';
import { Edition, EditionStatus, uninstallEdition } from '../../../api/marketplace';
import Modal from '../../../components/controls/Modal';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
export interface Props {
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
- handleConfirmClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
+ handleConfirmClick = () => {
this.setState({ loading: true });
uninstallEdition()
.then(() => {
<footer className="modal-foot">
{loading && <i className="spinner spacer-right" />}
- <button disabled={loading} onClick={this.handleConfirmClick}>
+ <Button disabled={loading} onClick={this.handleConfirmClick}>
{translate('marketplace.downgrade')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </Button>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
);
(wrapper.instance() as LicenseEditionForm).mounted = true;
wrapper.setState({ license: 'mylicense', status: 'NO_INSTALL' });
- button = wrapper.find('button');
- expect(button.text()).toBe('save');
- expect(button.prop('disabled')).toBeFalsy();
+ button = wrapper.find('Button');
+ expect(button).toMatchSnapshot();
wrapper.setState({ license: undefined, status: 'MANUAL_INSTALL' });
- button = wrapper.find('button');
- expect(button.text()).toBe('save');
- expect(button.prop('disabled')).toBeTruthy();
+ button = wrapper.find('Button');
+ expect(button).toMatchSnapshot();
wrapper.setState({ status: 'AUTOMATIC_INSTALL' });
- button = wrapper.find('button');
- expect(button.text()).toContain('install');
- expect(button.prop('disabled')).toBeTruthy();
+ button = wrapper.find('Button');
+ expect(button).toMatchSnapshot();
wrapper.setState({ license: 'mylicense' });
- expect(wrapper.find('button').prop('disabled')).toBeFalsy();
+ expect(wrapper.find('Button').prop('disabled')).toBeFalsy();
});
it('should update the edition status after install', async () => {
const form = wrapper.instance() as LicenseEditionForm;
form.handleLicenseChange('mylicense', 'AUTOMATIC_INSTALL');
wrapper.update();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(applyLicense).toHaveBeenCalledWith({ license: 'mylicense' });
await new Promise(setImmediate);
expect(updateEditionStatus).toHaveBeenCalledWith({
const updateEditionStatus = jest.fn();
const wrapper = getWrapper({ updateEditionStatus });
(wrapper.instance() as UninstallEditionForm).mounted = true;
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(uninstallEdition).toHaveBeenCalled();
await new Promise(setImmediate);
expect(updateEditionStatus).toHaveBeenCalledWith({
>
marketplace.learn_more
</a>
- <button
+ <Button
disabled={true}
onClick={[Function]}
>
action
- </button>
+ </Button>
</div>
</div>
`;
>
marketplace.learn_more
</a>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
action
- </button>
+ </Button>
</div>
</div>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should correctly change the button based on the status and license 1`] = `
+<Button
+ className="js-confirm"
+ disabled={false}
+ onClick={[Function]}
+>
+ save
+</Button>
+`;
+
+exports[`should correctly change the button based on the status and license 2`] = `
+<Button
+ className="js-confirm"
+ disabled={true}
+ onClick={[Function]}
+>
+ save
+</Button>
+`;
+
+exports[`should correctly change the button based on the status and license 3`] = `
+<Button
+ className="js-confirm"
+ disabled={true}
+ onClick={[Function]}
+>
+ marketplace.install
+</Button>
+`;
+
exports[`should display correctly 1`] = `
<Modal
contentLabel="marketplace.upgrade_to_x.Foo"
<footer
className="modal-foot"
>
- <a
- className="js-modal-close"
- href="#"
- onClick={[Function]}
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
marketplace.downgrade
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
import * as React from 'react';
import * as classNames from 'classnames';
import { BadgeType } from './utils';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
}
export default class BadgeButton extends React.PureComponent<Props> {
- handleClick = () => this.props.onClick(this.props.type);
+ handleClick = () => {
+ this.props.onClick(this.props.type);
+ };
render() {
const { selected, type, url } = this.props;
const width = type !== BadgeType.measure ? '128px' : undefined;
return (
- <button className={classNames('badge-button', { selected })} onClick={this.handleClick}>
- <img src={url} alt={translate('overview.badges', type, 'alt')} width={width} />
- </button>
+ <Button className={classNames('badge-button', { selected })} onClick={this.handleClick}>
+ <img alt={translate('overview.badges', type, 'alt')} src={url} width={width} />
+ </Button>
);
}
}
import Modal from '../../../components/controls/Modal';
import { translate } from '../../../helpers/l10n';
import './styles.css';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
branch?: string;
badgeOptions: { color: 'white', metric: 'alert_status' }
};
- handleClose = () => this.setState({ open: false });
-
- handleOpen = () => this.setState({ open: true });
+ handleClose = () => {
+ this.setState({ open: false });
+ };
- handleSelectBadge = (selectedType: BadgeType) => this.setState({ selectedType });
+ handleOpen = () => {
+ this.setState({ open: true });
+ };
- handleUpdateOptions = (options: Partial<BadgeOptions>) =>
- this.setState(state => ({
- badgeOptions: { ...state.badgeOptions, ...options }
- }));
+ handleSelectBadge = (selectedType: BadgeType) => {
+ this.setState({ selectedType });
+ };
- handleCancelClick = () => this.handleClose();
+ handleUpdateOptions = (options: Partial<BadgeOptions>) => {
+ this.setState(state => ({ badgeOptions: { ...state.badgeOptions, ...options } }));
+ };
render() {
const { branch, project } = this.props;
const fullBadgeOptions = { branch, project, ...badgeOptions };
return (
<div className="overview-meta-card">
- <button className="js-project-badges" onClick={this.handleOpen}>
+ <Button className="js-project-badges" onClick={this.handleOpen}>
{translate('overview.badges.get_badge')}
- </button>
+ </Button>
{this.state.open && (
<Modal contentLabel={header} onRequestClose={this.handleClose}>
<header className="modal-head">
<BadgeSnippet snippet={getBadgeUrl(selectedType, fullBadgeOptions)} />
</div>
<footer className="modal-foot">
- <button className="button-link js-modal-close" onClick={this.handleCancelClick}>
+ <ResetButtonLink className="js-modal-close" onClick={this.handleClose}>
{translate('close')}
- </button>
+ </ResetButtonLink>
</footer>
</Modal>
)}
it('should return the badge type on click', () => {
const onClick = jest.fn();
const wrapper = getWrapper({ onClick });
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(onClick).toHaveBeenCalledWith(BadgeType.marketing);
});
it('should display the modal after click', () => {
const wrapper = shallow(<BadgesModal branch="branch-6.6" metrics={{}} project="foo" />);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper.find('Modal')).toMatchSnapshot();
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should display correctly 1`] = `
-<button
+<Button
className="badge-button"
onClick={[Function]}
>
src="http://foo.bar"
width="128px"
/>
-</button>
+</Button>
`;
exports[`should display correctly 2`] = `
-<button
+<Button
className="badge-button selected"
onClick={[Function]}
>
src="http://foo.bar"
width="128px"
/>
-</button>
+</Button>
`;
exports[`should display correctly 3`] = `
-<button
+<Button
className="badge-button"
onClick={[Function]}
>
alt="overview.badges.measure.alt"
src="http://foo.bar"
/>
-</button>
+</Button>
`;
<div
className="overview-meta-card"
>
- <button
+ <Button
className="js-project-badges"
onClick={[Function]}
>
overview.badges.get_badge
- </button>
+ </Button>
</div>
`;
<footer
className="modal-foot"
>
- <button
- className="button-link js-modal-close"
+ <ResetButtonLink
+ className="js-modal-close"
onClick={[Function]}
>
close
- </button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
import TagsList from '../../../components/tags/TagsList';
import { BubblePopupPosition } from '../../../components/common/BubblePopup';
import { Component } from '../../../app/types';
+import { Button } from '../../../components/ui/buttons';
interface Props {
component: Component;
export default class MetaTags extends React.PureComponent<Props, State> {
card?: HTMLDivElement | null;
- tagsList?: HTMLButtonElement | null;
+ tagsList?: HTMLElement | null;
tagsSelector?: HTMLDivElement | null;
state: State = { popupOpen: false, popupPosition: { top: 0, right: 0 } };
}
};
- handleClick = (evt: React.SyntheticEvent<HTMLButtonElement>) => {
- evt.stopPropagation();
+ handleClick = () => {
this.setState(state => ({ popupOpen: !state.popupOpen }));
};
if (this.canUpdateTags()) {
return (
<div className="big-spacer-top overview-meta-tags" ref={card => (this.card = card)}>
- <button
+ <Button
className="button-link"
+ innerRef={tagsList => (this.tagsList = tagsList)}
onClick={this.handleClick}
- ref={tagsList => (this.tagsList = tagsList)}>
+ stopPropagation={true}>
<TagsList allowUpdate={true} tags={tags.length ? tags : [translate('no_tags')]} />
- </button>
+ </Button>
{popupOpen && (
<div ref={tagsSelector => (this.tagsSelector = tagsSelector)}>
<MetaTagsSelector
expect(wrapper).toMatchSnapshot();
// open
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper).toMatchSnapshot();
// close
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper).toMatchSnapshot();
});
<div
className="big-spacer-top overview-meta-tags"
>
- <button
+ <Button
className="button-link"
+ innerRef={[Function]}
onClick={[Function]}
+ stopPropagation={true}
>
<TagsList
allowUpdate={true}
]
}
/>
- </button>
+ </Button>
</div>
`;
<div
className="big-spacer-top overview-meta-tags"
>
- <button
+ <Button
className="button-link"
+ innerRef={[Function]}
onClick={[Function]}
+ stopPropagation={true}
>
<TagsList
allowUpdate={true}
]
}
/>
- </button>
+ </Button>
<div>
<MetaTagsSelector
position={
<div
className="big-spacer-top overview-meta-tags"
>
- <button
+ <Button
className="button-link"
+ innerRef={[Function]}
onClick={[Function]}
+ stopPropagation={true}
>
<TagsList
allowUpdate={true}
]
}
/>
- </button>
+ </Button>
</div>
`;
<div
className="big-spacer-top overview-meta-tags"
>
- <button
+ <Button
className="button-link"
+ innerRef={[Function]}
onClick={[Function]}
+ stopPropagation={true}
>
<TagsList
allowUpdate={true}
]
}
/>
- </button>
+ </Button>
</div>
`;
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import SimpleModal from '../../../components/controls/SimpleModal';
import { translate } from '../../../helpers/l10n';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
confirmButtonText: string;
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
- <button disabled={submitting} id="permission-template-submit" type="submit">
+ <SubmitButton disabled={submitting} id="permission-template-submit">
{this.props.confirmButtonText}
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
disabled={submitting}
id="permission-template-cancel"
- onClick={onCloseClick}
- type="reset">
+ onClick={onCloseClick}>
{translate('cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
)}
import * as PropTypes from 'prop-types';
import Form from './Form';
import { createPermissionTemplate } from '../../../api/permissions';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleCreateClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleCreateClick = () => {
this.setState({ createModal: true });
};
{!this.props.ready && <i className="spinner" />}
<div className="page-actions">
- <button onClick={this.handleCreateClick} type="button">
- {translate('create')}
- </button>
+ <Button onClick={this.handleCreateClick}>{translate('create')}</Button>
{this.state.createModal && (
<Form
import DeferredSpinner from '../../../../components/common/DeferredSpinner';
import SimpleModal from '../../../../components/controls/SimpleModal';
import Select from '../../../../components/controls/Select';
+import { SubmitButton, ResetButtonLink } from '../../../../components/ui/buttons';
import { translateWithParameters, translate } from '../../../../helpers/l10n';
interface Props {
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
{!this.state.done && (
- <button disabled={submitting || !this.state.permissionTemplate} type="submit">
+ <SubmitButton disabled={submitting || !this.state.permissionTemplate}>
{translate('apply')}
- </button>
+ </SubmitButton>
)}
- <button className="button-link" onClick={onCloseClick} type="reset">
+ <ResetButtonLink onClick={onCloseClick}>
{translate(this.state.done ? 'close' : 'cancel')}
- </button>
+ </ResetButtonLink>
</footer>
</form>
)}
import * as React from 'react';
import ApplyTemplate from './ApplyTemplate';
import { Component } from '../../../../app/types';
+import { Button } from '../../../../components/ui/buttons';
import { translate } from '../../../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleApplyTemplate = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleApplyTemplate = () => {
this.setState({ applyTemplateModal: true });
};
{canApplyPermissionTemplate && (
<div className="page-actions">
- <button className="js-apply-template" onClick={this.handleApplyTemplate} type="button">
+ <Button className="js-apply-template" onClick={this.handleApplyTemplate}>
{translate('projects_role.apply_template')}
- </button>
+ </Button>
{this.state.applyTemplateModal && (
<ApplyTemplate
import * as React from 'react';
import { ReportStatus, subscribe, unsubscribe } from '../../../api/report';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { Button } from '../../../components/ui/buttons';
interface Props {
component: string;
}
};
- handleSubscribe = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
- e.currentTarget.blur();
+ handleSubscribe = () => {
this.setState({ loading: true });
subscribe(this.props.component)
.then(() => this.handleSubscription(true))
.catch(this.stopLoading);
};
- handleUnsubscribe = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
- e.currentTarget.blur();
+ handleUnsubscribe = () => {
this.setState({ loading: true });
unsubscribe(this.props.component)
.then(() => this.handleSubscription(false))
{translateWithParameters('report.subscribed', this.getEffectiveFrequencyText())}
</div>
</div>
- <button onClick={this.handleUnsubscribe}>{translate('report.unsubscribe')}</button>
+ <Button onClick={this.handleUnsubscribe}>{translate('report.unsubscribe')}</Button>
{this.renderLoading()}
</div>
);
<p className="spacer-bottom">
{translateWithParameters('report.unsubscribed', this.getEffectiveFrequencyText())}
</p>
- <button className="js-report-subscribe" onClick={this.handleSubscribe}>
+ <Button className="js-report-subscribe" onClick={this.handleSubscribe}>
{translate('report.subscribe')}
- </button>
+ </Button>
{this.renderLoading()}
</div>
);
>
report.unsubscribed.report.frequency.montly.effective
</p>
- <button
+ <Button
className="js-report-subscribe"
onClick={[Function]}
>
report.subscribe
- </button>
+ </Button>
</div>
</div>
`;
report.subscribed.report.frequency.montly.effective
</div>
</div>
- <button
+ <Button
onClick={[Function]}
>
report.unsubscribe
- </button>
+ </Button>
</div>
</div>
`;
import { deleteBranch } from '../../../api/branches';
import { Branch } from '../../../app/types';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
);
};
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
render() {
const { branch } = this.props;
const header = translate('branches.delete');
</div>
<footer className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button className="button-red" disabled={this.state.loading} type="submit">
+ <SubmitButton className="button-red" disabled={this.state.loading}>
{translate('delete')}
- </button>
- <a href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ </SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
</Modal>
import * as React from 'react';
import { renameBranch } from '../../../api/branches';
import { Branch } from '../../../app/types';
-import { translate } from '../../../helpers/l10n';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
interface Props {
branch: Branch;
);
};
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<footer className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} type="submit">
- {translate('rename')}
- </button>
- <a href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ <SubmitButton disabled={submitDisabled}>{translate('rename')}</SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
</Modal>
*/
import * as React from 'react';
import { SettingValue, setSimpleSettingValue, resetSettingValue } from '../../../api/settings';
+import { Button, SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
this.setState({ value: event.currentTarget.value });
};
- handleResetClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleResetClick = () => {
this.setState({ submitting: true });
resetSettingValue(this.props.setting.key, this.props.project, this.props.branch).then(
this.props.onChange,
);
};
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
render() {
const { setting } = this.props;
const submitDisabled = this.state.submitting || this.state.value === setting.value;
<footer className="modal-foot">
{!setting.inherited &&
setting.parentValue && (
- <button
+ <Button
className="pull-left"
disabled={this.state.submitting}
onClick={this.handleResetClick}
type="reset">
{translate('reset_to_default')}
- </button>
+ </Button>
)}
{this.state.submitting && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} type="submit">
- {translate('save')}
- </button>
- <a href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ <SubmitButton disabled={submitDisabled}>{translate('save')}</SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
);
const onClose = jest.fn();
const wrapper = shallowRender(jest.fn(), onClose);
- click(wrapper.find('a'));
+ click(wrapper.find('ResetButtonLink'));
return doAsync().then(() => {
expect(onClose).toBeCalled();
import * as React from 'react';
import { shallow } from 'enzyme';
import LongBranchesPattern from '../LongBranchesPattern';
+import { click } from '../../../../helpers/testUtils';
jest.mock('../../../../api/settings', () => ({
getValues: jest.fn(() => Promise.resolve([]))
const wrapper = shallow(<LongBranchesPattern project="project" />);
wrapper.setState({ loading: false, setting: { value: 'release-.*' } });
- wrapper.find('EditButton').prop<Function>('onClick')();
- wrapper.update();
+ click(wrapper.find('EditButton'));
expect(wrapper.find('LongBranchesPatternForm').exists()).toBeTruthy();
wrapper.find('LongBranchesPatternForm').prop<Function>('onClose')();
const onClose = jest.fn();
const wrapper = shallowRender(jest.fn(), onClose);
- click(wrapper.find('a'));
+ click(wrapper.find('ResetButtonLink'));
return doAsync().then(() => {
expect(onClose).toBeCalled();
);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button[type="reset"]'));
+ click(wrapper.find('Button'));
expect(resetSettingValue).toBeCalledWith('foo', 'project', undefined);
await new Promise(setImmediate);
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
className="button-red"
disabled={false}
- type="submit"
>
delete
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<i
className="spinner spacer-right"
/>
- <button
+ <SubmitButton
className="button-red"
disabled={true}
- type="submit"
>
delete
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
rename
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
rename
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<i
className="spinner spacer-right"
/>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
rename
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
save
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
className="pull-left"
disabled={false}
onClick={[Function]}
type="reset"
>
reset_to_default
- </button>
- <button
+ </Button>
+ <SubmitButton
disabled={true}
- type="submit"
>
save
- </button>
- <a
- href="#"
- onClick={[Function]}
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
`;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
onClearAll: () => void;
}
-export default class ClearAll extends React.PureComponent<Props> {
- handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onClearAll();
- };
-
- render() {
- return (
- <div className="projects-facets-reset">
- <button className="button-red" onClick={this.handleClick}>
- {translate('clear_all_filters')}
- </button>
- </div>
- );
- }
+export default function ClearAll({ onClearAll }: Props) {
+ return (
+ <div className="projects-facets-reset">
+ <Button className="button-red" onClick={onClearAll}>
+ {translate('clear_all_filters')}
+ </Button>
+ </div>
+ );
}
it('clears all', () => {
const onClearAll = jest.fn();
const wrapper = shallow(<ClearAll onClearAll={onClearAll} />);
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(onClearAll).toBeCalled();
});
import * as React from 'react';
import { shallow } from 'enzyme';
import ProjectsSortingSelect from '../ProjectsSortingSelect';
+import { click } from '../../../../helpers/testUtils';
it('should render correctly for overall view', () => {
expect(
view="overall"
/>
);
- wrapper.find('ButtonIcon').prop<Function>('onClick')();
+ click(wrapper.find('ButtonIcon'));
expect(onChange).toBeCalledWith('size', false);
});
<div
className="projects-facets-reset"
>
- <button
+ <Button
className="button-red"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
clear_all_filters
- </button>
+ </Button>
</div>
`;
import AlertWarnIcon from '../../components/icons-components/AlertWarnIcon';
import Modal from '../../components/controls/Modal';
import Select from '../../components/controls/Select';
+import { Button, ResetButtonLink } from '../../components/ui/buttons';
export interface Props {
analyzedBefore?: string;
);
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleConfirmClick = () => {
const { permissionTemplate } = this.state;
if (permissionTemplate) {
{!loading &&
!done &&
permissionTemplates && (
- <button disabled={submitting} onClick={this.handleConfirmClick}>
+ <Button disabled={submitting} onClick={this.handleConfirmClick}>
{translate('apply')}
- </button>
+ </Button>
)}
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{done ? translate('close') : translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
);
import * as classNames from 'classnames';
import { Organization, Visibility } from '../../app/types';
import UpgradeOrganizationBox from '../../components/common/UpgradeOrganizationBox';
-import { translate } from '../../helpers/l10n';
import Modal from '../../components/controls/Modal';
+import { Button, ResetButtonLink } from '../../components/ui/buttons';
+import { translate } from '../../helpers/l10n';
export interface Props {
onClose: () => void;
this.state = { visibility: props.organization.projectVisibility as Visibility };
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
- handleConfirmClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
+ handleConfirmClick = () => {
this.props.onConfirm(this.state.visibility);
this.props.onClose();
};
</div>
<footer className="modal-foot">
- <button className="js-confirm" onClick={this.handleConfirmClick}>
+ <Button className="js-confirm" onClick={this.handleConfirmClick}>
{translate('organization.change_visibility_form.submit')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </Button>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
);
import * as React from 'react';
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl';
+import { createProject } from '../../api/components';
import { Organization } from '../../app/types';
import UpgradeOrganizationBox from '../../components/common/UpgradeOrganizationBox';
import VisibilitySelector from '../../components/common/VisibilitySelector';
-import { createProject } from '../../api/components';
+import Modal from '../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../components/ui/buttons';
import { translate } from '../../helpers/l10n';
import { getProjectUrl } from '../../helpers/urls';
-import Modal from '../../components/controls/Modal';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleAdvancedClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
event.currentTarget.blur();
</div>
<footer className="modal-foot">
- <a
- href="#"
+ <ResetButtonLink
id="create-project-close"
- onClick={this.handleCancelClick}
- ref={node => (this.closeButton = node)}>
+ innerRef={node => (this.closeButton = node)}
+ onClick={this.props.onClose}>
{translate('close')}
- </a>
+ </ResetButtonLink>
</footer>
</div>
) : (
<footer className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={this.state.loading} id="create-project-submit" type="submit">
+ <SubmitButton disabled={this.state.loading} id="create-project-submit">
{translate('create')}
- </button>
- <a href="#" id="create-project-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="create-project-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</form>
)}
*/
import * as React from 'react';
import { bulkDeleteProjects } from '../../api/components';
-import { translate, translateWithParameters } from '../../helpers/l10n';
-import AlertWarnIcon from '../../components/icons-components/AlertWarnIcon';
import Modal from '../../components/controls/Modal';
+import AlertWarnIcon from '../../components/icons-components/AlertWarnIcon';
+import { Button, ResetButtonLink } from '../../components/ui/buttons';
+import { translate, translateWithParameters } from '../../helpers/l10n';
export interface Props {
analyzedBefore?: string;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleConfirmClick = () => {
this.setState({ loading: true });
const parameters = this.props.selection.length
<footer className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button
+ <Button
className="button-red"
disabled={this.state.loading}
onClick={this.handleConfirmClick}>
{translate('delete')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </Button>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
);
import * as React from 'react';
import ChangeVisibilityForm from './ChangeVisibilityForm';
import { Organization, Visibility } from '../../app/types';
+import { EditButton, Button } from '../../components/ui/buttons';
import { translate } from '../../helpers/l10n';
-import { EditButton } from '../../components/ui/buttons';
export interface Props {
hasProvisionPermission?: boolean;
export default class Header extends React.PureComponent<Props, State> {
state: State = { visibilityForm: false };
- handleCreateProjectClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- this.props.onProjectCreate();
- };
-
handleChangeVisibilityClick = () => {
this.setState({ visibilityForm: true });
};
/>
</span>
{this.props.hasProvisionPermission && (
- <button id="create-project" onClick={this.handleCreateProjectClick}>
+ <Button id="create-project" onClick={this.props.onProjectCreate}>
{translate('qualifiers.create.TRK')}
- </button>
+ </Button>
)}
</div>
import { Project } from './utils';
import { grantPermissionToUser } from '../../api/permissions';
import Modal from '../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../components/ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
this.setState({ loading: true });
<footer className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={this.state.loading} type="submit">
- {translate('restore')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ <SubmitButton disabled={this.state.loading}>{translate('restore')}</SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
</Modal>
import DateInput from '../../components/controls/DateInput';
import Select from '../../components/controls/Select';
import SearchBox from '../../components/controls/SearchBox';
+import { Button } from '../../components/ui/buttons';
export interface Props {
analyzedBefore?: string;
}
};
- handleDeleteClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleDeleteClick = () => {
this.setState({ deleteModal: true });
};
this.props.onDeleteProjects();
};
- handleBulkApplyTemplateClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleBulkApplyTemplateClick = () => {
this.setState({ bulkApplyTemplateModal: true });
};
<Checkbox
checked={checked}
id="projects-selection"
- thirdState={thirdState}
onCheck={this.onCheck}
+ thirdState={thirdState}
/>
);
};
className="input-medium"
clearable={false}
disabled={!this.props.ready}
+ name="projects-qualifier"
+ onChange={this.handleQualifierChange}
optionRenderer={this.renderQualifierOption}
options={this.getQualifierOptions()}
+ searchable={false}
value={this.props.qualifiers}
valueRenderer={this.renderQualifierOption}
- name="projects-qualifier"
- onChange={this.handleQualifierChange}
- searchable={false}
/>
</td>
);
this.props.qualifiers === 'TRK' ? (
<td className="thin nowrap text-middle">
<Checkbox
- className="link-checkbox-control"
checked={this.props.provisioned}
+ className="link-checkbox-control"
id="projects-provisioned"
onCheck={this.props.onProvisionedChanged}>
<span className="little-spacer-left">
/>
</td>
<td className="thin nowrap text-middle">
- <button
+ <Button
className="js-bulk-apply-permission-template"
disabled={this.props.total === 0}
onClick={this.handleBulkApplyTemplateClick}>
{translate('permission_templates.bulk_apply_permission_template')}
- </button>
+ </Button>
{this.props.qualifiers === 'TRK' && (
- <button
+ <Button
className="js-delete spacer-left button-red"
disabled={this.props.total === 0}
onClick={this.handleDeleteClick}>
{translate('delete')}
- </button>
+ </Button>
)}
</td>
</tr>
});
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(bulkApplyTemplate).toBeCalledWith({
analyzedBefore: '2017-04-08T00:00:00.000Z',
onProvisionedOnly: true,
});
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper).toMatchSnapshot();
await new Promise(setImmediate);
expect(bulkApplyTemplate).toBeCalledWith({
(wrapper.instance() as DeleteModal).mounted = true;
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper).toMatchSnapshot();
expect(bulkDeleteProjects).toBeCalledWith({
analyzedBefore: '2017-04-08T00:00:00.000Z',
(wrapper.instance() as DeleteModal).mounted = true;
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper).toMatchSnapshot();
expect(bulkDeleteProjects).toBeCalledWith({ organization: 'org', projects: 'proj1,proj2' });
<footer
className="modal-foot"
>
- <a
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
apply
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<i
className="spinner spacer-right"
/>
- <button
+ <Button
disabled={true}
onClick={[Function]}
>
apply
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <a
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
close
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <a
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
apply
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<i
className="spinner spacer-right"
/>
- <button
+ <Button
disabled={true}
onClick={[Function]}
>
apply
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <a
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
close
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
className="js-confirm"
onClick={[Function]}
>
organization.change_visibility_form.submit
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
className="js-confirm"
onClick={[Function]}
>
organization.change_visibility_form.submit
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
className="js-confirm"
onClick={[Function]}
>
organization.change_visibility_form.submit
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="create-project-submit"
- type="submit"
>
create
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="create-project-cancel"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="create-project-submit"
- type="submit"
>
create
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="create-project-cancel"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<i
className="spinner spacer-right"
/>
- <button
+ <SubmitButton
disabled={true}
id="create-project-submit"
- type="submit"
>
create
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="create-project-cancel"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <a
- href="#"
+ <ResetButtonLink
id="create-project-close"
- onClick={[Function]}
+ innerRef={[Function]}
+ onClick={[MockFunction]}
>
close
- </a>
+ </ResetButtonLink>
</footer>
</div>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="create-project-submit"
- type="submit"
>
create
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="create-project-cancel"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="create-project-submit"
- type="submit"
>
create
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="create-project-cancel"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <Button
className="button-red"
disabled={false}
onClick={[Function]}
>
delete
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<i
className="spinner spacer-right"
/>
- <button
+ <Button
className="button-red"
disabled={true}
onClick={[Function]}
>
delete
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <button
+ <Button
className="button-red"
disabled={false}
onClick={[Function]}
>
delete
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<i
className="spinner spacer-right"
/>
- <button
+ <Button
className="button-red"
disabled={true}
onClick={[Function]}
>
delete
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="js-modal-close"
- href="#"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</footer>
</Modal>
`;
onClick={[Function]}
/>
</span>
- <button
+ <Button
id="create-project"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
qualifiers.create.TRK
- </button>
+ </Button>
</div>
<p
className="page-description"
<td
className="thin nowrap text-middle"
>
- <button
+ <Button
className="js-bulk-apply-permission-template"
disabled={false}
onClick={[Function]}
>
permission_templates.bulk_apply_permission_template
- </button>
- <button
+ </Button>
+ <Button
className="js-delete spacer-left button-red"
disabled={false}
onClick={[Function]}
>
delete
- </button>
+ </Button>
</td>
</tr>
</tbody>
<td
className="thin nowrap text-middle"
>
- <button
+ <Button
className="js-bulk-apply-permission-template"
disabled={false}
onClick={[Function]}
>
permission_templates.bulk_apply_permission_template
- </button>
- <button
+ </Button>
+ <Button
className="js-delete spacer-left button-red"
disabled={false}
onClick={[Function]}
>
delete
- </button>
+ </Button>
</td>
</tr>
</tbody>
import * as React from 'react';
import DeleteConditionForm from './DeleteConditionForm';
import ThresholdInput from './ThresholdInput';
-import Checkbox from '../../../components/controls/Checkbox';
-import Select from '../../../components/controls/Select';
import {
Condition as ICondition,
ConditionBase,
updateCondition
} from '../../../api/quality-gates';
import { Metric } from '../../../app/types';
+import Checkbox from '../../../components/controls/Checkbox';
+import Select from '../../../components/controls/Select';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, getLocalizedMetricName } from '../../../helpers/l10n';
import { formatMeasure } from '../../../helpers/measures';
this.props.onResetError();
};
- handleCancelClick = (e: React.SyntheticEvent<HTMLAnchorElement>) => {
- e.preventDefault();
- e.stopPropagation();
+ handleCancelClick = () => {
this.props.onDeleteCondition(this.props.condition);
};
- openDeleteConditionForm = () => this.setState({ openDeleteCondition: true });
- closeDeleteConditionForm = () => this.setState({ openDeleteCondition: false });
+ openDeleteConditionForm = () => {
+ this.setState({ openDeleteCondition: true });
+ };
+
+ closeDeleteConditionForm = () => {
+ this.setState({ openDeleteCondition: false });
+ };
renderPeriodValue() {
const { condition, metric } = this.props;
<td className="thin text-middle nowrap">
{edit ? (
<ThresholdInput
- name="warning"
- value={this.state.warning}
metric={metric}
+ name="warning"
onChange={this.handleWarningChange}
+ value={this.state.warning}
/>
) : (
formatMeasure(condition.warning, metric.type)
<td className="thin text-middle nowrap">
{edit ? (
<ThresholdInput
- name="error"
- value={this.state.error}
metric={metric}
+ name="error"
onChange={this.handleErrorChange}
+ value={this.state.error}
/>
) : (
formatMeasure(condition.error, metric.type)
<td className="thin text-middle nowrap">
{condition.id ? (
<div>
- <button
+ <Button
className="update-condition"
disabled={!this.state.changed}
onClick={this.handleUpdateClick}>
{translate('update_verb')}
- </button>
- <button
+ </Button>
+ <Button
className="button-red delete-condition little-spacer-left"
onClick={this.openDeleteConditionForm}>
{translate('delete')}
- </button>
+ </Button>
{this.state.openDeleteCondition && (
<DeleteConditionForm
condition={condition}
</div>
) : (
<div>
- <button className="add-condition" onClick={this.handleSaveClick}>
+ <Button className="add-condition" onClick={this.handleSaveClick}>
{translate('add_verb')}
- </button>
- <a
+ </Button>
+ <ResetButtonLink
className="cancel-add-condition spacer-left"
- href="#"
onClick={this.handleCancelClick}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
)}
</td>
*/
import * as React from 'react';
import * as PropTypes from 'prop-types';
-import Modal from '../../../components/controls/Modal';
import { copyQualityGate, QualityGate } from '../../../api/quality-gates';
-import { getQualityGateUrl } from '../../../helpers/urls';
+import Modal from '../../../components/controls/Modal';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
+import { getQualityGateUrl } from '../../../helpers/urls';
interface Props {
qualityGate: QualityGate;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<div className="modal-foot">
{loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} className="js-confirm">
+ <Button className="js-confirm" disabled={submitDisabled}>
{translate('copy')}
- </button>
- <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+ </Button>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
*/
import * as React from 'react';
import * as PropTypes from 'prop-types';
-import Modal from '../../../components/controls/Modal';
import { createQualityGate, QualityGate } from '../../../api/quality-gates';
+import Modal from '../../../components/controls/Modal';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
import { getQualityGateUrl } from '../../../helpers/urls';
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<div className="modal-foot">
{loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} className="js-confirm">
+ <Button className="js-confirm" disabled={submitDisabled}>
{translate('save')}
- </button>
- <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+ </Button>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import Modal from '../../../components/controls/Modal';
-import { Metric } from '../../../app/types';
import { Condition, deleteCondition } from '../../../api/quality-gates';
+import { Metric } from '../../../app/types';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
const { organization, condition } = this.props;
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button className="js-delete button-red" disabled={this.state.loading}>
+ <SubmitButton className="js-delete button-red" disabled={this.state.loading}>
{translate('delete')}
- </button>
- <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
*/
import * as React from 'react';
import * as PropTypes from 'prop-types';
-import Modal from '../../../components/controls/Modal';
-import { getQualityGatesUrl } from '../../../helpers/urls';
import { deleteQualityGate, QualityGate } from '../../../api/quality-gates';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { getQualityGatesUrl } from '../../../helpers/urls';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
const { organization, qualityGate } = this.props;
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button className="js-delete button-red" disabled={this.state.loading}>
+ <SubmitButton className="js-delete button-red" disabled={this.state.loading}>
{translate('delete')}
- </button>
- <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
import CopyQualityGateForm from './CopyQualityGateForm';
import DeleteQualityGateForm from './DeleteQualityGateForm';
import { fetchQualityGate, QualityGate, setQualityGateAsDefault } from '../../../api/quality-gates';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
export default class DetailsHeader extends React.PureComponent<Props, State> {
state = { openPopup: undefined };
- handleRenameClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
+ handleRenameClick = () => {
this.setState({ openPopup: 'rename' });
};
- handleCopyClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
+ handleCopyClick = () => {
this.setState({ openPopup: 'copy' });
};
- handleSetAsDefaultClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
+ handleSetAsDefaultClick = () => {
const { qualityGate, onSetAsDefault, organization } = this.props;
if (!qualityGate.isDefault) {
setQualityGateAsDefault({ id: qualityGate.id, organization })
}
};
- handleDeleteClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
- e.preventDefault();
+ handleDeleteClick = () => {
this.setState({ openPopup: 'delete' });
};
<div className="pull-right">
{actions.rename && (
- <button id="quality-gate-rename" onClick={this.handleRenameClick}>
+ <Button id="quality-gate-rename" onClick={this.handleRenameClick}>
{translate('rename')}
- </button>
+ </Button>
)}
{actions.copy && (
- <button
+ <Button
className="little-spacer-left"
id="quality-gate-copy"
onClick={this.handleCopyClick}>
{translate('copy')}
- </button>
+ </Button>
)}
{actions.setAsDefault && (
- <button
+ <Button
className="little-spacer-left"
id="quality-gate-toggle-default"
onClick={this.handleSetAsDefaultClick}>
{translate('set_as_default')}
- </button>
+ </Button>
)}
{actions.delete && (
- <button
- id="quality-gate-delete"
+ <Button
className="little-spacer-left button-red"
+ id="quality-gate-delete"
onClick={this.handleDeleteClick}>
{translate('delete')}
- </button>
+ </Button>
)}
{openPopup === 'rename' && (
<RenameQualityGateForm
+ onClose={this.handleClosePopup}
onRename={this.props.onRename}
organization={organization}
- onClose={this.handleClosePopup}
qualityGate={qualityGate}
/>
)}
{openPopup === 'copy' && (
<CopyQualityGateForm
+ onClose={this.handleClosePopup}
onCopy={this.props.onCopy}
organization={organization}
- onClose={this.handleClosePopup}
qualityGate={qualityGate}
/>
)}
{openPopup === 'delete' && (
<DeleteQualityGateForm
+ onClose={this.handleClosePopup}
onDelete={this.props.onDelete}
organization={organization}
- onClose={this.handleClosePopup}
qualityGate={qualityGate}
/>
)}
import * as React from 'react';
import CreateQualityGateForm from '../components/CreateQualityGateForm';
import { QualityGate } from '../../../api/quality-gates';
-import { translate } from '../../../helpers/l10n';
import { Organization } from '../../../app/types';
+import { Button } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
interface Props {
canCreate: boolean;
export default class ListHeader extends React.PureComponent<Props, State> {
state = { createQualityGateOpen: false };
- openCreateQualityGateForm = () => this.setState({ createQualityGateOpen: true });
- closeCreateQualityGateForm = () => this.setState({ createQualityGateOpen: false });
+ openCreateQualityGateForm = () => {
+ this.setState({ createQualityGateOpen: true });
+ };
+
+ closeCreateQualityGateForm = () => {
+ this.setState({ createQualityGateOpen: false });
+ };
render() {
const { organization } = this.props;
<h1 className="page-title">{translate('quality_gates.page')}</h1>
{this.props.canCreate && (
<div className="page-actions">
- <button id="quality-gate-add" onClick={this.openCreateQualityGateForm}>
+ <Button id="quality-gate-add" onClick={this.openCreateQualityGateForm}>
{translate('create')}
- </button>
+ </Button>
</div>
)}
{this.state.createQualityGateOpen && (
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import Modal from '../../../components/controls/Modal';
import { QualityGate, renameQualityGate } from '../../../api/quality-gates';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<div className="modal-foot">
{loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} className="js-confirm">
+ <SubmitButton className="js-confirm" disabled={submitDisabled}>
{translate('rename')}
- </button>
- <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
*/
import * as React from 'react';
import DateInput from '../../../components/controls/DateInput';
+import { Button } from '../../../components/ui/buttons';
import { toShortNotSoISOString } from '../../../helpers/dates';
import { translate } from '../../../helpers/l10n';
}
export default class ChangelogSearch extends React.PureComponent<Props> {
- handleResetClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onReset();
- };
-
formatDate = (date?: string) => (date ? toShortNotSoISOString(date) : undefined);
render() {
placeholder={translate('to')}
value={this.formatDate(this.props.toDate)}
/>
- <button className="spacer-left" onClick={this.handleResetClick}>
+ <Button className="spacer-left" onClick={this.props.onReset}>
{translate('reset_verb')}
- </button>
+ </Button>
</div>
);
}
const output = shallow(
<ChangelogSearch
fromDate="2016-01-01"
- toDate="2016-05-05"
onFromDateChange={onFromDateChange}
- onToDateChange={onToDateChange}
onReset={jest.fn()}
+ onToDateChange={onToDateChange}
+ toDate="2016-05-05"
/>
);
const dateInputs = output.find(DateInput);
const output = shallow(
<ChangelogSearch
fromDate="2016-01-01"
- toDate="2016-05-05"
onFromDateChange={jest.fn()}
- onToDateChange={jest.fn()}
onReset={onReset}
+ onToDateChange={jest.fn()}
+ toDate="2016-05-05"
/>
);
expect(onReset).not.toBeCalled();
- click(output.find('button'));
+ click(output.find('Button'));
expect(onReset).toBeCalled();
});
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { Profile } from '../types';
import { copyProfile } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Profile } from '../types';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} id="copy-profile-submit">
+ <SubmitButton disabled={submitDisabled} id="copy-profile-submit">
{translate('copy')}
- </button>
- <a href="#" id="copy-profile-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="copy-profile-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { Profile } from '../types';
import { deleteProfile } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Profile } from '../types';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
this.setState({ loading: true });
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button className="button-red" disabled={this.state.loading} id="delete-profile-submit">
+ <SubmitButton
+ className="button-red"
+ disabled={this.state.loading}
+ id="delete-profile-submit">
{translate('delete')}
- </button>
- <a href="#" id="delete-profile-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="delete-profile-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { Profile } from '../types';
import { renameProfile } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Profile } from '../types';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} id="rename-profile-submit">
+ <SubmitButton disabled={submitDisabled} id="rename-profile-submit">
{translate('rename')}
- </button>
- <a href="#" id="rename-profile-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="rename-profile-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
*/
import * as React from 'react';
import { sortBy } from 'lodash';
+import { Profile } from '../types';
import { changeProfileParent } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
-import { Profile } from '../types';
interface Props {
onChange: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleSelectChange = (option: { value: string }) => {
this.setState({ selected: option.value });
};
</div>
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} id="change-profile-parent-submit">
+ <SubmitButton disabled={submitDisabled} id="change-profile-parent-submit">
{translate('change_verb')}
- </button>
- <a href="#" id="change-profile-parent-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="change-profile-parent-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
import * as classNames from 'classnames';
import ProfileInheritanceBox from './ProfileInheritanceBox';
import ChangeParentForm from './ChangeParentForm';
-import { translate } from '../../../helpers/l10n';
-import { getProfileInheritance } from '../../../api/quality-profiles';
import { Profile } from '../types';
+import { getProfileInheritance } from '../../../api/quality-profiles';
+import { Button } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
interface Props {
onRequestFail: (reason: any) => void;
}
loadData() {
- getProfileInheritance(this.props.profile.key).then((r: any) => {
- if (this.mounted) {
- const { ancestors, children } = r;
- this.setState({
- children,
- ancestors: ancestors.reverse(),
- profile: r.profile,
- loading: false
- });
+ getProfileInheritance(this.props.profile.key).then(
+ r => {
+ if (this.mounted) {
+ const { ancestors, children } = r;
+ this.setState({
+ children,
+ ancestors: ancestors.reverse(),
+ profile: r.profile,
+ loading: false
+ });
+ }
+ },
+ () => {
+ if (this.mounted) {
+ this.setState({ loading: false });
+ }
}
- });
+ );
}
- handleChangeParentClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
+ handleChangeParentClick = () => {
this.setState({ formOpen: true });
};
profile.actions.edit &&
!profile.isBuiltIn && (
<div className="boxed-group-actions">
- <button
+ <Button
className="pull-right js-change-parent"
onClick={this.handleChangeParentClick}>
{translate('quality_profiles.change_parent')}
- </button>
+ </Button>
</div>
)}
searchGroups,
SearchUsersGroupsParameters
} from '../../../api/quality-profiles';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
export interface User {
);
}
- handleAddUserButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleAddUserButtonClick = () => {
this.setState({ addUserForm: true });
};
/>
))}
<div className="text-right">
- <button onClick={this.handleAddUserButtonClick}>
+ <Button onClick={this.handleAddUserButtonClick}>
{translate('quality_profiles.grant_permissions_to_more_users')}
- </button>
+ </Button>
</div>
</div>
)}
onClose={this.handleAddUserFormClose}
onGroupAdd={this.handleGroupAdd}
onUserAdd={this.handleUserAdd}
- profile={this.props.profile}
organization={this.props.organization}
+ profile={this.props.profile}
/>
)}
</div>
SearchUsersGroupsParameters
} from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
<div className="modal-large-field">
<label>{translate('quality_profiles.search_description')}</label>
<ProfilePermissionsFormSelect
- selected={this.state.selected}
onChange={this.handleValueChange}
onSearch={this.handleSearch}
+ selected={this.state.selected}
/>
</div>
</div>
<footer className="modal-foot">
{this.state.submitting && <i className="spinner spacer-right" />}
- <button disabled={submitDisabled} type="submit">
- {translate('add_verb')}
- </button>
- <button className="button-link" onClick={this.props.onClose} type="reset">
- {translate('cancel')}
- </button>
+ <SubmitButton disabled={submitDisabled}>{translate('add_verb')}</SubmitButton>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</footer>
</form>
</Modal>
import { removeGroup } from '../../../api/quality-profiles';
import SimpleModal, { ChildrenProps } from '../../../components/controls/SimpleModal';
import GroupIcon from '../../../components/icons-components/GroupIcon';
-import { DeleteButton } from '../../../components/ui/buttons';
+import { DeleteButton, Button, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
<footer className="modal-foot">
{props.submitting && <i className="spinner spacer-right" />}
- <button className="button-red" disabled={props.submitting} onClick={props.onSubmitClick}>
+ <Button className="button-red" disabled={props.submitting} onClick={props.onSubmitClick}>
{translate('remove')}
- </button>
- <a href="#" onClick={props.onCloseClick}>
- {translate('cancel')}
- </a>
+ </Button>
+ <ResetButtonLink onClick={props.onCloseClick}>{translate('cancel')}</ResetButtonLink>
</footer>
</div>
);
import { User } from './ProfilePermissions';
import { removeUser } from '../../../api/quality-profiles';
import SimpleModal, { ChildrenProps } from '../../../components/controls/SimpleModal';
-import { DeleteButton } from '../../../components/ui/buttons';
+import { DeleteButton, SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import Avatar from '../../../components/ui/Avatar';
import { translate } from '../../../helpers/l10n';
<footer className="modal-foot">
{props.submitting && <i className="spinner spacer-right" />}
- <button className="button-red" disabled={props.submitting} onClick={props.onSubmitClick}>
+ <SubmitButton
+ className="button-red"
+ disabled={props.submitting}
+ onClick={props.onSubmitClick}>
{translate('remove')}
- </button>
- <a href="#" onClick={props.onCloseClick}>
- {translate('cancel')}
- </a>
+ </SubmitButton>
+ <ResetButtonLink onClick={props.onCloseClick}>{translate('cancel')}</ResetButtonLink>
</footer>
</div>
);
import * as React from 'react';
import { Link } from 'react-router';
import ChangeProjectsForm from './ChangeProjectsForm';
-import QualifierIcon from '../../../components/shared/QualifierIcon';
+import { Profile } from '../types';
import { getProfileProjects } from '../../../api/quality-profiles';
+import QualifierIcon from '../../../components/shared/QualifierIcon';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
-import { Profile } from '../types';
interface Props {
organization: string | null;
);
}
- handleChangeClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
+ handleChangeClick = () => {
this.setState({ formOpen: true });
};
return (
<ul>
{projects.map(project => (
- <li key={project.uuid} className="spacer-top js-profile-project" data-key={project.key}>
+ <li className="spacer-top js-profile-project" data-key={project.key} key={project.uuid}>
<Link
- to={{ pathname: '/dashboard', query: { id: project.key } }}
- className="link-with-icon">
+ className="link-with-icon"
+ to={{ pathname: '/dashboard', query: { id: project.key } }}>
<QualifierIcon qualifier="TRK" /> <span>{project.name}</span>
</Link>
</li>
{profile.actions &&
profile.actions.associateProjects && (
<div className="boxed-group-actions">
- <button className="js-change-projects" onClick={this.handleChangeClick}>
+ <Button className="js-change-projects" onClick={this.handleChangeClick}>
{translate('quality_profiles.change_projects')}
- </button>
+ </Button>
</div>
)}
await waitAndUpdate(wrapper);
expect(wrapper.find('ProfilePermissionsForm').exists()).toBeFalsy();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper.find('ProfilePermissionsForm').exists()).toBeTruthy();
wrapper.find('ProfilePermissionsForm').prop<Function>('onClose')();
import * as React from 'react';
import { shallow } from 'enzyme';
import ProfilePermissionsGroup from '../ProfilePermissionsGroup';
+import { click } from '../../../../helpers/testUtils';
const removeGroup = require('../../../../api/quality-profiles').removeGroup as jest.Mock<any>;
(wrapper.instance() as ProfilePermissionsGroup).mounted = true;
expect(wrapper.find('SimpleModal').exists()).toBeFalsy();
- wrapper.find('DeleteButton').prop<Function>('onClick')();
- wrapper.update();
+ click(wrapper.find('DeleteButton'));
expect(wrapper.find('SimpleModal').exists()).toBeTruthy();
wrapper.find('SimpleModal').prop<Function>('onSubmit')();
import * as React from 'react';
import { shallow } from 'enzyme';
import ProfilePermissionsUser from '../ProfilePermissionsUser';
+import { click } from '../../../../helpers/testUtils';
const removeUser = require('../../../../api/quality-profiles').removeUser as jest.Mock<any>;
(wrapper.instance() as ProfilePermissionsUser).mounted = true;
expect(wrapper.find('SimpleModal').exists()).toBeFalsy();
- wrapper.find('DeleteButton').prop<Function>('onClick')();
- wrapper.update();
+ click(wrapper.find('DeleteButton'));
expect(wrapper.find('SimpleModal').exists()).toBeTruthy();
wrapper.find('SimpleModal').prop<Function>('onSubmit')();
<div
className="text-right"
>
- <button
+ <Button
onClick={[Function]}
>
quality_profiles.grant_permissions_to_more_users
- </button>
+ </Button>
</div>
</div>
</div>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<i
className="spinner spacer-right"
/>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<footer
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
<i
className="spinner spacer-right"
/>
- <button
+ <SubmitButton
disabled={true}
- type="submit"
>
add_verb
- </button>
- <button
- className="button-link"
+ </SubmitButton>
+ <ResetButtonLink
onClick={[MockFunction]}
- type="reset"
>
cancel
- </button>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
import { getImporters, createQualityProfile } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
fetchImporters() {
getImporters().then(
- (importers: Array<{ key: string; languages: Array<string>; name: string }>) => {
+ importers => {
if (this.mounted) {
this.setState({ importers, preloading: false });
}
+ },
+ () => {
+ if (this.mounted) {
+ this.setState({ preloading: false });
+ }
}
);
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: event.currentTarget.value });
};
</div>
))}
{/* drop me when we stop supporting ie11 */}
- <input type="hidden" name="hello-ie11" value="" />
+ <input name="hello-ie11" type="hidden" value="" />
</div>
)}
<div className="modal-foot">
{this.state.loading && <i className="spinner spacer-right" />}
{!this.state.preloading && (
- <button disabled={this.state.loading} id="create-profile-submit">
+ <SubmitButton disabled={this.state.loading} id="create-profile-submit">
{translate('create')}
- </button>
+ </SubmitButton>
)}
- <a href="#" id="create-profile-cancel" onClick={this.handleCancelClick}>
+ <ResetButtonLink id="create-profile-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
import * as PropTypes from 'prop-types';
import CreateProfileForm from './CreateProfileForm';
import RestoreProfileForm from './RestoreProfileForm';
-import { getProfilePath } from '../utils';
-import { translate } from '../../../helpers/l10n';
import { Profile } from '../types';
+import { getProfilePath } from '../utils';
import { Actions } from '../../../api/quality-profiles';
+import { Button } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
interface Props {
actions: Actions;
restoreFormOpen: false
};
- handleCreateClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleCreateClick = () => {
this.setState({ createFormOpen: true });
};
handleCreate = (profile: Profile) => {
- this.props.updateProfiles().then(() => {
- this.context.router.push(
- getProfilePath(profile.name, profile.language, this.props.organization)
- );
- });
+ this.props.updateProfiles().then(
+ () => {
+ this.context.router.push(
+ getProfilePath(profile.name, profile.language, this.props.organization)
+ );
+ },
+ () => {}
+ );
};
closeCreateForm = () => {
this.setState({ createFormOpen: false });
};
- handleRestoreClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
+ handleRestoreClick = () => {
this.setState({ restoreFormOpen: true });
};
{this.props.actions.create && (
<div className="page-actions">
- <button id="quality-profiles-create" onClick={this.handleCreateClick}>
+ <Button id="quality-profiles-create" onClick={this.handleCreateClick}>
{translate('create')}
- </button>
- <button
+ </Button>
+ <Button
className="little-spacer-left"
id="quality-profiles-restore"
onClick={this.handleRestoreClick}>
{translate('restore')}
- </button>
+ </Button>
</div>
)}
<CreateProfileForm
languages={this.props.languages}
onClose={this.closeCreateForm}
- onRequestFail={this.props.onRequestFail}
onCreate={this.handleCreate}
+ onRequestFail={this.props.onRequestFail}
organization={this.props.organization}
/>
)}
import { restoreQualityProfile } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
interface Props {
onClose: () => void;
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
{ruleSuccesses == null ? (
<div className="modal-foot">
{loading && <i className="spinner spacer-right" />}
- <button disabled={loading} id="restore-profile-submit">
+ <SubmitButton disabled={loading} id="restore-profile-submit">
{translate('restore')}
- </button>
- <a href="#" id="restore-profile-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="restore-profile-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
) : (
<div className="modal-foot">
- <a href="#" onClick={this.handleCancelClick}>
+ <ResetButtonLink id="restore-profile-cancel" onClick={this.props.onClose}>
{translate('close')}
- </a>
+ </ResetButtonLink>
</div>
)}
</form>
import OAuthProviders from './OAuthProviders';
import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
import { IdentityProvider } from '../../../app/types';
+import { SubmitButton } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
import './LoginForm.css';
<GlobalMessagesContainer />
<div className="big-spacer-bottom">
- <label htmlFor="login" className="login-label">
+ <label className="login-label" htmlFor="login">
{translate('login')}
</label>
<input
- type="text"
- id="login"
- name="login"
+ autoFocus={true}
className="login-input"
+ id="login"
maxLength={255}
- required={true}
- autoFocus={true}
+ name="login"
+ onChange={this.handleLoginChange}
placeholder={translate('login')}
+ required={true}
+ type="text"
value={this.state.login}
- onChange={this.handleLoginChange}
/>
</div>
<div className="big-spacer-bottom">
- <label htmlFor="password" className="login-label">
+ <label className="login-label" htmlFor="password">
{translate('password')}
</label>
<input
- type="password"
+ className="login-input"
id="password"
name="password"
- className="login-input"
- required={true}
+ onChange={this.handlePwdChange}
placeholder={translate('password')}
+ required={true}
+ type="password"
value={this.state.password}
- onChange={this.handlePwdChange}
/>
</div>
<div>
<div className="text-right overflow-hidden">
- <button name="commit" type="submit">
- {translate('sessions.log_in')}
- </button>
+ <SubmitButton>{translate('sessions.log_in')}</SubmitButton>
<Link className="spacer-left" to="/">
{translate('cancel')}
</Link>
<div
className="text-right overflow-hidden"
>
- <button
- name="commit"
- type="submit"
- >
+ <SubmitButton>
sessions.log_in
- </button>
+ </SubmitButton>
<Link
className="spacer-left"
onlyActiveOnIndex={false}
<div
className="text-right overflow-hidden"
>
- <button
- name="commit"
- type="submit"
- >
+ <SubmitButton>
sessions.log_in
- </button>
+ </SubmitButton>
<Link
className="spacer-left"
onlyActiveOnIndex={false}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { LOGS_LEVELS } from '../utils';
import { setLogLevel } from '../../../api/system';
import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
-import { LOGS_LEVELS } from '../utils';
interface Props {
infoMsg: string;
this.state = { newLevel: props.logLevel, updating: false };
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
const { newLevel } = this.state;
</div>
<div className="modal-body">
{LOGS_LEVELS.map(level => (
- <p key={level} className="spacer-bottom">
+ <p className="spacer-bottom" key={level}>
<input
- id={`loglevel-${level}`}
- type="radio"
+ checked={level === newLevel}
className="spacer-right text-middle"
+ id={`loglevel-${level}`}
name="system.log_levels"
- value={level}
- checked={level === newLevel}
onChange={this.handleLevelChange}
+ type="radio"
+ value={level}
/>
<label className="text-middle" htmlFor={`loglevel-${level}`}>
{level}
</div>
<div className="modal-foot">
{updating && <i className="spinner spacer-right" />}
- <button disabled={updating} id="set-log-level-submit">
+ <SubmitButton disabled={updating} id="set-log-level-submit">
{translate('save')}
- </button>
- <a href="#" id="set-log-level-cancel" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink id="set-log-level-cancel" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
import ChangeLogLevelForm from './ChangeLogLevelForm';
import RestartForm from '../../../components/common/RestartForm';
import { getFileNameSuffix } from '../utils';
-import { EditButton } from '../../../components/ui/buttons';
+import { EditButton, Button } from '../../../components/ui/buttons';
import { getBaseUrl } from '../../../helpers/urls';
import { translate } from '../../../helpers/l10n';
this.handleLogsLevelClose();
};
- handleLogsLevelClose = () => this.setState({ openLogsLevelForm: false });
+ handleLogsLevelClose = () => {
+ this.setState({ openLogsLevelForm: false });
+ };
+
+ handleServerRestartOpen = () => {
+ this.setState({ openRestartForm: true });
+ };
- handleServerRestartOpen = () => this.setState({ openRestartForm: true });
- handleServerRestartClose = () => this.setState({ openRestartForm: false });
+ handleServerRestartClose = () => {
+ this.setState({ openRestartForm: false });
+ };
- removeElementFocus = (event: React.SyntheticEvent<HTMLElement>) => event.currentTarget.blur();
+ removeElementFocus = (event: React.SyntheticEvent<HTMLElement>) => {
+ event.currentTarget.blur();
+ };
render() {
const infoUrl = getBaseUrl() + '/api/system/info';
<strong className="little-spacer-left">{this.state.logLevel}</strong>
</span>
<EditButton
- id="edit-logs-level-button"
className="spacer-left button-small"
+ id="edit-logs-level-button"
onClick={this.handleLogsLevelOpen}
/>
</span>
{this.props.canDownloadLogs && (
<div className="display-inline-block dropdown spacer-left">
- <button data-toggle="dropdown">
+ {/* TODO use Dropdown component */}
+ <Button data-toggle="dropdown">
{translate('system.download_logs')}
<i className="icon-dropdown little-spacer-left" />
- </button>
+ </Button>
<ul className="dropdown-menu">
<li>
<a
+ download="sonarqube_app.log"
href={logsUrl + '?process=app'}
id="logs-link"
- download="sonarqube_app.log"
target="_blank">
Main Process
</a>
</li>
<li>
<a
+ download="sonarqube_ce.log"
href={logsUrl + '?process=ce'}
id="ce-logs-link"
- download="sonarqube_ce.log"
target="_blank">
Compute Engine
</a>
</li>
<li>
<a
+ download="sonarqube_es.log"
href={logsUrl + '?process=es'}
id="es-logs-link"
- download="sonarqube_es.log"
target="_blank">
Search Engine
</a>
</li>
<li>
<a
+ download="sonarqube_web.log"
href={logsUrl + '?process=web'}
id="web-logs-link"
- download="sonarqube_web.log"
target="_blank">
Web Server
</a>
</div>
)}
<a
+ className="button spacer-left"
+ download={`sonarqube-support-info-${getFileNameSuffix(this.props.serverId)}.json`}
href={infoUrl}
id="download-link"
- className="button spacer-left"
onClick={this.removeElementFocus}
- download={`sonarqube-support-info-${getFileNameSuffix(this.props.serverId)}.json`}
target="_blank">
{translate('system.download_system_info')}
</a>
{this.props.canRestart && (
- <button
- id="restart-server-button"
+ <Button
className="spacer-left"
+ id="restart-server-button"
onClick={this.handleServerRestartOpen}>
{translate('system.restart_server')}
- </button>
+ </Button>
)}
{this.props.canRestart &&
this.state.openRestartForm && <RestartForm onClose={this.handleServerRestartClose} />}
<div
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="set-log-level-submit"
>
save
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="set-log-level-cancel"
onClick={[Function]}
>
cancel
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
<div
className="modal-foot"
>
- <button
+ <SubmitButton
disabled={false}
id="set-log-level-submit"
>
save
- </button>
- <a
- href="#"
+ </SubmitButton>
+ <ResetButtonLink
id="set-log-level-cancel"
onClick={[Function]}
>
cancel
- </a>
+ </ResetButtonLink>
</div>
</form>
</Modal>
<div
className="display-inline-block dropdown spacer-left"
>
- <button
+ <Button
data-toggle="dropdown"
>
system.download_logs
<i
className="icon-dropdown little-spacer-left"
/>
- </button>
+ </Button>
<ul
className="dropdown-menu"
>
>
system.download_system_info
</a>
- <button
+ <Button
className="spacer-left"
id="restart-server-button"
onClick={[Function]}
>
system.restart_server
- </button>
+ </Button>
</div>
`;
*/
import * as React from 'react';
import SystemUpgradeForm from './SystemUpgradeForm';
+import { sortUpgrades, groupUpgrades } from '../../utils';
import { getSystemUpgrades, SystemUpgrade } from '../../../../api/system';
+import { Button } from '../../../../components/ui/buttons';
import { translate } from '../../../../helpers/l10n';
-import { sortUpgrades, groupUpgrades } from '../../utils';
interface State {
systemUpgrades: SystemUpgrade[][];
() => {}
);
- handleOpenSystemUpgradeForm = () => this.setState({ openSystemUpgradeForm: true });
- handleCloseSystemUpgradeForm = () => this.setState({ openSystemUpgradeForm: false });
+ handleOpenSystemUpgradeForm = () => {
+ this.setState({ openSystemUpgradeForm: true });
+ };
+
+ handleCloseSystemUpgradeForm = () => {
+ this.setState({ openSystemUpgradeForm: false });
+ };
render() {
const { systemUpgrades } = this.state;
<div className="page-notifs">
<div className="alert alert-info">
{translate('system.new_version_available')}
- <button className="spacer-left" onClick={this.handleOpenSystemUpgradeForm}>
+ <Button className="spacer-left" onClick={this.handleOpenSystemUpgradeForm}>
{translate('learn_more')}
- </button>
+ </Button>
</div>
{this.state.openSystemUpgradeForm && (
<SystemUpgradeForm
- systemUpgrades={systemUpgrades}
onClose={this.handleCloseSystemUpgradeForm}
+ systemUpgrades={systemUpgrades}
/>
)}
</div>
it('should open the upgrade form', async () => {
const wrapper = shallow(<SystemUpgradeNotif />);
await waitAndUpdate(wrapper);
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper.find('SystemUpgradeForm').exists()).toBeTruthy();
});
className="alert alert-info"
>
system.new_version_available
- <button
+ <Button
className="spacer-left"
onClick={[Function]}
>
learn_more
- </button>
+ </Button>
</div>
</div>
`;
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</div>
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</div>
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small text-middle button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small text-middle button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</div>
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small text-middle button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small text-middle button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</div>
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small text-middle button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small text-middle button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</form>
color="#d4333f"
onClick={[Function]}
>
- <button
+ <Button
className="button-small text-middle button-icon"
onClick={[Function]}
+ stopPropagation={true}
style={
Object {
"color": "#d4333f",
}
}
>
- <ClearIcon />
- </button>
+ <button
+ className="button button-small text-middle button-icon"
+ onClick={[Function]}
+ style={
+ Object {
+ "color": "#d4333f",
+ }
+ }
+ type="button"
+ >
+ <ClearIcon />
+ </button>
+ </Button>
</ButtonIcon>
</DeleteButton>
</form>
bar"
tooltipPlacement="top"
>
- <button
+ <Button
className="js-copy-to-clipboard no-select"
data-clipboard-text="foo
bar"
+ innerRef={[Function]}
>
- copy
- </button>
+ <button
+ className="button js-copy-to-clipboard no-select"
+ data-clipboard-text="foo
+bar"
+ onClick={[Function]}
+ type="button"
+ >
+ copy
+ </button>
+ </Button>
</ClipboardButton>
</div>
</Command>
import * as React from 'react';
import UserForm from './components/UserForm';
import DeferredSpinner from '../../components/common/DeferredSpinner';
+import { Button } from '../../components/ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
export default class Header extends React.PureComponent<Props, State> {
state: State = { openUserForm: false };
- handleOpenUserForm = () => this.setState({ openUserForm: true });
- handleCloseUserForm = () => this.setState({ openUserForm: false });
+ handleOpenUserForm = () => {
+ this.setState({ openUserForm: true });
+ };
+
+ handleCloseUserForm = () => {
+ this.setState({ openUserForm: false });
+ };
render() {
return (
- <header id="users-header" className="page-header">
+ <header className="page-header" id="users-header">
<h1 className="page-title">{translate('users.page')}</h1>
<DeferredSpinner loading={this.props.loading} />
<div className="page-actions">
- <button id="users-create" onClick={this.handleOpenUserForm}>
+ <Button id="users-create" onClick={this.handleOpenUserForm}>
{translate('users.create_user')}
- </button>
+ </Button>
</div>
<p className="page-description">{translate('users.page.description')}</p>
<div
className="page-actions"
>
- <button
+ <Button
id="users-create"
onClick={[Function]}
>
users.create_user
- </button>
+ </Button>
</div>
<p
className="page-description"
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import Modal from '../../../components/controls/Modal';
import { deactivateUser } from '../../../api/users';
import { User } from '../../../app/types';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
export interface Props {
this.mounted = false;
}
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleDeactivate = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
this.setState({ submitting: true });
const header = translate('users.deactivate_user');
return (
<Modal contentLabel={header} onRequestClose={this.props.onClose}>
- <form id="deactivate-user-form" onSubmit={this.handleDeactivate} autoComplete="off">
+ <form autoComplete="off" id="deactivate-user-form" onSubmit={this.handleDeactivate}>
<header className="modal-head">
<h2>{header}</h2>
</header>
</div>
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
- <button className="js-confirm button-red" disabled={submitting} type="submit">
+ <SubmitButton className="js-confirm button-red" disabled={submitting}>
{translate('users.deactivate')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import Modal from '../../../components/controls/Modal';
+import { changePassword } from '../../../api/users';
+import { User } from '../../../app/types';
import addGlobalSuccessMessage from '../../../app/utils/addGlobalSuccessMessage';
import throwGlobalError from '../../../app/utils/throwGlobalError';
-import { User } from '../../../app/types';
-import { parseError } from '../../../helpers/request';
-import { changePassword } from '../../../api/users';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
+import { parseError } from '../../../helpers/request';
interface Props {
isCurrentUser: boolean;
handleOldPasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
this.setState({ oldPassword: event.currentTarget.value });
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleChangePassword = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
if (
const header = translate('my_profile.password.title');
return (
<Modal contentLabel={header} onRequestClose={this.props.onClose}>
- <form id="user-password-form" onSubmit={this.handleChangePassword} autoComplete="off">
+ <form autoComplete="off" id="user-password-form" onSubmit={this.handleChangePassword}>
<header className="modal-head">
<h2>{header}</h2>
</header>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="old-password-fake" type="password" className="hidden" />
+ <input className="hidden" name="old-password-fake" type="password" />
<input
id="old-user-password"
- name="old-password"
- type="password"
maxLength={50}
+ name="old-password"
onChange={this.handleOldPasswordChange}
required={true}
+ type="password"
value={this.state.oldPassword}
/>
</div>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="password-fake" type="password" className="hidden" />
+ <input className="hidden" name="password-fake" type="password" />
<input
id="user-password"
- name="password"
- type="password"
maxLength={50}
+ name="password"
onChange={this.handleNewPasswordChange}
required={true}
+ type="password"
value={this.state.newPassword}
/>
</div>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="confirm-password-fake" type="password" className="hidden" />
+ <input className="hidden" name="confirm-password-fake" type="password" />
<input
id="confirm-user-password"
- name="confirm-password"
- type="password"
maxLength={50}
+ name="confirm-password"
onChange={this.handleConfirmPasswordChange}
required={true}
+ type="password"
value={this.state.confirmPassword}
/>
</div>
</div>
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
- <button
+ <SubmitButton
className="js-confirm"
- disabled={submitting || !newPassword || newPassword !== confirmPassword}
- type="submit">
+ disabled={submitting || !newPassword || newPassword !== confirmPassword}>
{translate('change_verb')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
import * as React from 'react';
import TokensFormItem from './TokensFormItem';
import TokensFormNewToken from './TokensFormNewToken';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import { getTokens, generateToken, UserToken } from '../../../api/user-tokens';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
+import { SubmitButton } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
if (tokens.length <= 0) {
return (
<tr>
- <td colSpan={3} className="note">
+ <td className="note" colSpan={3}>
{translate('users.no_tokens')}
</td>
</tr>
<TokensFormItem
key={token.name}
login={this.props.login}
- token={token}
onRevokeToken={this.handleRevokeToken}
+ token={token}
/>
));
}
return (
<>
<h3 className="spacer-bottom">{translate('users.generate_tokens')}</h3>
- <form id="generate-token-form" onSubmit={this.handleGenerateToken} autoComplete="off">
+ <form autoComplete="off" id="generate-token-form" onSubmit={this.handleGenerateToken}>
<input
className="spacer-right"
- type="text"
maxLength={100}
onChange={this.handleNewTokenChange}
placeholder={translate('users.enter_token_name')}
required={true}
+ type="text"
value={newTokenName}
/>
- <button
+ <SubmitButton
className="js-generate-token"
- disabled={generating || newTokenName.length <= 0}
- type="submit">
+ disabled={generating || newTokenName.length <= 0}>
{translate('users.generate')}
- </button>
+ </SubmitButton>
</form>
{newToken && <TokensFormNewToken token={newToken} />}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { revokeToken, UserToken } from '../../../api/user-tokens';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
import Tooltip from '../../../components/controls/Tooltip';
import DateFormatter from '../../../components/intl/DateFormatter';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import { revokeToken, UserToken } from '../../../api/user-tokens';
-import { limitComponentName } from '../../../helpers/path';
+import { Button } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
+import { limitComponentName } from '../../../helpers/path';
interface Props {
login: string;
<DeferredSpinner loading={loading}>
<i className="spinner-placeholder " />
</DeferredSpinner>
- <button
+ <Button
className="button-red input-small spacer-left"
- onClick={this.handleRevoke}
- disabled={loading}>
+ disabled={loading}
+ onClick={this.handleRevoke}>
{this.state.deleting
? translate('users.tokens.sure')
: translate('users.tokens.revoke')}
- </button>
+ </Button>
</td>
</tr>
);
import * as React from 'react';
import { uniq } from 'lodash';
import UserScmAccountInput from './UserScmAccountInput';
-import Modal from '../../../components/controls/Modal';
-import throwGlobalError from '../../../app/utils/throwGlobalError';
-import { parseError } from '../../../helpers/request';
import { createUser, updateUser } from '../../../api/users';
import { User } from '../../../app/types';
+import throwGlobalError from '../../../app/utils/throwGlobalError';
+import Modal from '../../../components/controls/Modal';
+import { Button, SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { parseError } from '../../../helpers/request';
export interface Props {
user?: User;
handlePasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) =>
this.setState({ password: event.currentTarget.value });
- handleCancelClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleCreateUser = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
this.setState({ submitting: true });
}, this.handleError);
};
- handleAddScmAccount = (evt: React.SyntheticEvent<HTMLButtonElement>) => {
- evt.preventDefault();
+ handleAddScmAccount = () => {
this.setState(({ scmAccounts }) => ({ scmAccounts: scmAccounts.concat('') }));
};
return (
<Modal contentLabel={header} onRequestClose={this.props.onClose}>
<form
+ autoComplete="off"
id="user-form"
- onSubmit={this.props.user ? this.handleUpdateUser : this.handleCreateUser}
- autoComplete="off">
+ onSubmit={this.props.user ? this.handleUpdateUser : this.handleCreateUser}>
<header className="modal-head">
<h2>{header}</h2>
</header>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="login-fake" type="text" className="hidden" />
+ <input className="hidden" name="login-fake" type="text" />
<input
id="create-user-login"
- name="login"
- type="text"
- minLength={3}
maxLength={255}
+ minLength={3}
+ name="login"
onChange={this.handleLoginChange}
required={true}
+ type="text"
value={this.state.login}
/>
<p className="note">{translateWithParameters('users.minimum_x_characters', 3)}</p>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="name-fake" type="text" className="hidden" />
+ <input className="hidden" name="name-fake" type="text" />
<input
id="create-user-name"
- name="name"
- type="text"
maxLength={200}
+ name="name"
onChange={this.handleNameChange}
required={true}
+ type="text"
value={this.state.name}
/>
</div>
<div className="modal-field">
<label htmlFor="create-user-email">{translate('users.email')}</label>
{/* keep this fake field to hack browser autofill */}
- <input name="email-fake" type="email" className="hidden" />
+ <input className="hidden" name="email-fake" type="email" />
<input
id="create-user-email"
- name="email"
- type="email"
maxLength={100}
+ name="email"
onChange={this.handleEmailChange}
+ type="email"
value={this.state.email}
/>
</div>
<em className="mandatory">*</em>
</label>
{/* keep this fake field to hack browser autofill */}
- <input name="password-fake" type="password" className="hidden" />
+ <input className="hidden" name="password-fake" type="password" />
<input
id="create-user-password"
- name="password"
- type="password"
maxLength={50}
+ name="password"
onChange={this.handlePasswordChange}
required={true}
+ type="password"
value={this.state.password}
/>
</div>
/>
))}
<div className="spacer-bottom">
- <button onClick={this.handleAddScmAccount}>{translate('add_verb')}</button>
+ <Button onClick={this.handleAddScmAccount} type="reset">
+ {translate('add_verb')}
+ </Button>
</div>
<p className="note">{translate('user.login_or_email_used_as_scm_account')}</p>
</div>
<footer className="modal-foot">
{submitting && <i className="spinner spacer-right" />}
- <button className="js-confirm" disabled={submitting} type="submit">
+ <SubmitButton className="js-confirm" disabled={submitting}>
{user ? translate('update_verb') : translate('create')}
- </button>
- <a className="js-modal-close" href="#" onClick={this.handleCancelClick}>
+ </SubmitButton>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</footer>
</form>
</Modal>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { Button } from '../ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
onReset: () => void;
}
-export default class FiltersHeader extends React.PureComponent<Props> {
- handleResetClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- this.props.onReset();
- };
+export default function FiltersHeader({ displayReset, onReset }: Props) {
+ return (
+ <div className="search-navigator-filters-header">
+ {displayReset && (
+ <div className="pull-right">
+ <Button className="button-red" id="coding-rules-clear-all-filters" onClick={onReset}>
+ {translate('clear_all_filters')}
+ </Button>
+ </div>
+ )}
- render() {
- return (
- <div className="search-navigator-filters-header">
- {this.props.displayReset && (
- <div className="pull-right">
- <button
- className="button-red"
- id="coding-rules-clear-all-filters"
- onClick={this.handleResetClick}>
- {translate('clear_all_filters')}
- </button>
- </div>
- )}
-
- <h3>{translate('filters')}</h3>
- </div>
- );
- }
+ <h3>{translate('filters')}</h3>
+ </div>
+ );
}
import * as classNames from 'classnames';
import { restartAndWait } from '../../api/system';
import Modal from '../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
export default class RestartForm extends React.PureComponent<Props, State> {
state: State = { restarting: false };
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- this.props.onClose();
- };
-
handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
if (!this.state.restarting) {
</div>
{!restarting && (
<div className="modal-foot">
- <button id="restart-server-submit">{translate('restart')}</button>
- <a
- href="#"
+ <SubmitButton id="restart-server-submit">{translate('restart')}</SubmitButton>
+ <ResetButtonLink
className="js-modal-close"
id="restart-server-cancel"
- onClick={this.handleCancelClick}>
+ onClick={this.props.onClose}>
{translate('cancel')}
- </a>
+ </ResetButtonLink>
</div>
)}
</form>
import { Link } from 'react-router';
import { LocationDescriptor } from 'history';
import SettingsIcon from '../icons-components/SettingsIcon';
+import { Button } from '../ui/buttons';
interface Props {
className?: string;
export default function ActionsDropdown({ menuPosition = 'right', ...props }: Props) {
return (
<div className={classNames('dropdown', props.className)}>
- <button
+ <Button
className={classNames('dropdown-toggle', props.toggleClassName, {
'button-small': props.small
})}
onClick={props.onToggleClick}>
<SettingsIcon className="text-text-bottom" />
<i className="icon-dropdown little-spacer-left" />
- </button>
+ </Button>
<ul
className={classNames('dropdown-menu', props.menuClassName, {
'dropdown-menu-right': menuPosition === 'right'
import * as classNames from 'classnames';
import * as Clipboard from 'clipboard';
import Tooltip from './Tooltip';
+import { Button } from '../ui/buttons';
import { translate } from '../../helpers/l10n';
interface Props {
export default class ClipboardButton extends React.PureComponent<Props, State> {
clipboard?: Clipboard;
- copyButton?: HTMLButtonElement | null;
+ copyButton?: HTMLElement | null;
mounted = false;
state: State = { tooltipShown: false };
render() {
const button = (
- <button
+ <Button
className={classNames('js-copy-to-clipboard no-select', this.props.className)}
data-clipboard-text={this.props.copyValue}
- ref={node => (this.copyButton = node)}>
+ innerRef={node => (this.copyButton = node)}>
{translate('copy')}
- </button>
+ </Button>
);
if (this.state.tooltipShown) {
return (
<Tooltip
defaultVisible={true}
- placement={this.props.tooltipPlacement || 'bottom'}
overlay={translate('copied_action')}
+ placement={this.props.tooltipPlacement || 'bottom'}
trigger="manual">
{button}
</Tooltip>
import SimpleModal from './SimpleModal';
import DeferredSpinner from '../common/DeferredSpinner';
import { translate } from '../../helpers/l10n';
+import { SubmitButton, ResetButtonLink } from '../ui/buttons';
interface Props {
- children: (
- props: { onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void }
- ) => React.ReactNode;
+ children: (props: { onClick: () => void }) => React.ReactNode;
confirmButtonText: string;
confirmData?: string;
isDestructive?: boolean;
this.mounted = false;
}
- handleButtonClick = (event?: React.SyntheticEvent<HTMLButtonElement>) => {
- if (event) {
- event.preventDefault();
- event.currentTarget.blur();
- }
+ handleButtonClick = () => {
this.setState({ modal: true });
};
header={modalHeader}
onClose={this.handleCloseModal}
onSubmit={this.handleSubmit}>
- {({ onCloseClick, onSubmitClick, submitting }) => (
- <>
+ {({ onCloseClick, onFormSubmit, submitting }) => (
+ <form onSubmit={onFormSubmit}>
<header className="modal-head">
<h2>{modalHeader}</h2>
</header>
<footer className="modal-foot">
<DeferredSpinner className="spacer-right" loading={submitting} />
- <button
+ <SubmitButton
className={isDestructive ? 'button-red' : undefined}
- disabled={submitting}
- onClick={onSubmitClick}>
+ disabled={submitting}>
{confirmButtonText}
- </button>
- <a href="#" onClick={onCloseClick}>
- {translate('cancel')}
- </a>
+ </SubmitButton>
+ <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
</footer>
- </>
+ </form>
)}
</SimpleModal>
)}
interface RenderProps {
closeDropdown: () => void;
- onToggleClick: (event: React.SyntheticEvent<HTMLElement>) => void;
+ onToggleClick: (event?: React.SyntheticEvent<HTMLElement>) => void;
open: boolean;
}
closeDropdown = () => this.setState({ open: false });
- handleToggleClick = (event: React.SyntheticEvent<HTMLElement>) => {
- this.toggleNode = event.currentTarget;
- event.preventDefault();
- event.currentTarget.blur();
+ handleToggleClick = (event?: React.SyntheticEvent<HTMLElement>) => {
+ if (event) {
+ this.toggleNode = event.currentTarget;
+ event.preventDefault();
+ event.currentTarget.blur();
+ }
this.setState(state => ({ open: !state.open }));
};
import Modal from '../../components/controls/Modal';
export interface ChildrenProps {
- onCloseClick: (event: React.SyntheticEvent<HTMLElement>) => void;
+ onCloseClick: (event?: React.SyntheticEvent<HTMLElement>) => void;
onFormSubmit: (event: React.SyntheticEvent<HTMLFormElement>) => void;
- onSubmitClick: (event: React.SyntheticEvent<HTMLElement>) => void;
+ onSubmitClick: (event?: React.SyntheticEvent<HTMLElement>) => void;
submitting: boolean;
}
}
};
- handleCloseClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleCloseClick = (event?: React.SyntheticEvent<HTMLElement>) => {
+ if (event) {
+ event.preventDefault();
+ event.currentTarget.blur();
+ }
this.props.onClose();
};
this.submit();
};
- handleSubmitClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleSubmitClick = (event?: React.SyntheticEvent<HTMLElement>) => {
+ if (event) {
+ event.preventDefault();
+ event.currentTarget.blur();
+ }
this.submit();
};
import * as React from 'react';
import { shallow } from 'enzyme';
import Dropdown from '../Dropdown';
+import { Button } from '../../ui/buttons';
import { click } from '../../../helpers/testUtils';
it('renders', () => {
it('toggles', () => {
const wrapper = shallow(
- <Dropdown>{({ onToggleClick }) => <button onClick={onToggleClick} />}</Dropdown>
+ <Dropdown>{({ onToggleClick }) => <Button onClick={onToggleClick} />}</Dropdown>
);
expect(wrapper.state()).toEqual({ open: false });
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper.state()).toEqual({ open: true });
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(wrapper.state()).toEqual({ open: false });
});
import * as React from 'react';
import { shallow } from 'enzyme';
import SimpleModal, { ChildrenProps } from '../SimpleModal';
+import { Button } from '../../ui/buttons';
import { click, waitAndUpdate } from '../../../helpers/testUtils';
it('renders', () => {
it('closes', () => {
const onClose = jest.fn();
- const inner = ({ onCloseClick }: ChildrenProps) => <button onClick={onCloseClick}>close</button>;
+ const inner = ({ onCloseClick }: ChildrenProps) => <Button onClick={onCloseClick}>close</Button>;
const wrapper = shallow(
<SimpleModal header="" onClose={onClose} onSubmit={jest.fn()}>
{inner}
</SimpleModal>
);
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(onClose).toBeCalled();
});
it('submits', async () => {
const onSubmit = jest.fn(() => Promise.resolve());
const inner = ({ onSubmitClick, submitting }: ChildrenProps) => (
- <button disabled={submitting} onClick={onSubmitClick}>
+ <Button disabled={submitting} onClick={onSubmitClick}>
close
- </button>
+ </Button>
);
const wrapper = shallow(
<SimpleModal header="" onClose={jest.fn()} onSubmit={onSubmit}>
(wrapper.instance() as SimpleModal).mounted = true;
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('button'));
+ click(wrapper.find('Button'));
expect(onSubmit).toBeCalled();
expect(wrapper).toMatchSnapshot();
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should display correctly 1`] = `
-<button
+<Button
className="js-copy-to-clipboard no-select"
data-clipboard-text="foo"
+ innerRef={[Function]}
>
copy
-</button>
+</Button>
`;
exports[`should display correctly 2`] = `
placement="bottom"
trigger="manual"
>
- <button
+ <Button
className="js-copy-to-clipboard no-select"
data-clipboard-text="foo"
+ innerRef={[Function]}
>
copy
- </button>
+ </Button>
</Tooltip>
`;
contentLabel=""
onRequestClose={[MockFunction]}
>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
close
- </button>
+ </Button>
</Modal>
`;
contentLabel=""
onRequestClose={[MockFunction]}
>
- <button
+ <Button
disabled={true}
onClick={[Function]}
>
close
- </button>
+ </Button>
</Modal>
`;
contentLabel=""
onRequestClose={[MockFunction]}
>
- <button
+ <Button
disabled={false}
onClick={[Function]}
>
close
- </button>
+ </Button>
</Modal>
`;
import OpenCloseIcon from '../icons-components/OpenCloseIcon';
import HelpIcon from '../icons-components/HelpIcon';
import Tooltip from '../controls/Tooltip';
+import { Button } from '../ui/buttons';
import { translate, translateWithParameters } from '../../helpers/l10n';
interface Props {
}
export default class FacetHeader extends React.PureComponent<Props> {
- handleClearClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
- if (this.props.onClear) {
- this.props.onClear();
- }
- };
-
handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
event.currentTarget.blur();
</span>
{showClearButton && (
- <button
+ <Button
className="search-navigator-facet-header-button button-small button-red"
- onClick={this.handleClearClick}>
+ onClick={this.props.onClear}>
{translate('clear')}
- </button>
+ </Button>
)}
</div>
);
x_selected.3
</span>
</span>
- <button
+ <Button
className="search-navigator-facet-header-button button-small button-red"
- onClick={[Function]}
+ onClick={[MockFunction]}
>
clear
- </button>
+ </Button>
</div>
`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-.button-icon {
+
+/* use double selector .button-icon.button-icon to increase the specificity */
+
+.button-icon.button-icon {
display: inline-flex;
justify-content: center;
align-items: center;
color: inherit;
}
-.button-icon.button-small {
+.button-icon.button-icon.button-small {
width: var(--smallControlHeight);
height: var(--smallControlHeight);
padding: 0;
}
-.button-icon.button-small svg {
+.button-icon.button-icon.button-small svg {
margin-top: 0;
}
-.button-icon.button-tiny {
+.button-icon.button-icon.button-tiny {
width: var(--tinyControlHeight);
height: var(--tinyControlHeight);
padding: 0;
}
-.button-icon:hover,
-.button-icon:focus {
+.button-icon.button-icon:hover,
+.button-icon.button-icon:focus {
background-color: currentColor;
}
-.button-icon:hover svg,
-.button-icon:focus svg {
+.button-icon.button-icon:hover svg,
+.button-icon.button-icon:focus svg {
color: #fff;
}
import * as React from 'react';
import * as classNames from 'classnames';
import * as theme from '../../app/theme';
+import { Omit } from '../../app/types';
import ClearIcon from '../icons-components/ClearIcon';
import EditIcon from '../icons-components/EditIcon';
import Tooltip from '../controls/Tooltip';
import './buttons.css';
-interface ButtonIconProps {
- children: React.ReactNode;
+interface ButtonProps {
className?: string;
- color?: string;
- onClick?: () => void;
- tooltip?: string;
- [x: string]: any;
+ children?: React.ReactNode;
+ disabled?: boolean;
+ id?: string;
+ innerRef?: (node: HTMLElement | null) => void;
+ onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+ preventDefault?: boolean;
+ stopPropagation?: boolean;
+ style?: React.CSSProperties;
+ type?: string;
}
-export class ButtonIcon extends React.PureComponent<ButtonIconProps> {
- handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
+export class Button extends React.PureComponent<ButtonProps> {
+ handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+ const { onClick, preventDefault = true, stopPropagation = false } = this.props;
+
event.currentTarget.blur();
- event.stopPropagation();
- if (this.props.onClick) {
- this.props.onClick();
- }
+ if (preventDefault) event.preventDefault();
+ if (stopPropagation) event.stopPropagation();
+ if (onClick) onClick(event);
};
render() {
- const { children, className, color = theme.darkBlue, onClick, tooltip, ...props } = this.props;
- const buttonComponent = (
+ const {
+ className,
+ innerRef,
+ onClick,
+ preventDefault,
+ stopPropagation,
+ type = 'button',
+ ...props
+ } = this.props;
+ return (
+ // eslint-disable-next-line react/button-has-type
<button
- className={classNames(className, 'button-icon')}
+ {...props}
+ className={classNames('button', className)}
+ disabled={this.props.disabled}
+ id={this.props.id}
onClick={this.handleClick}
- style={{ color }}
- {...props}>
- {children}
- </button>
+ ref={this.props.innerRef}
+ type={type}
+ />
+ );
+ }
+}
+
+export function SubmitButton(props: Omit<ButtonProps, 'type'>) {
+ // do not prevent default to actually submit a form
+ return <Button {...props} preventDefault={false} type="submit" />;
+}
+
+export function ResetButtonLink({ className, ...props }: Omit<ButtonProps, 'type'>) {
+ return <Button {...props} className={classNames('button-link', className)} type="reset" />;
+}
+
+interface ButtonIconProps {
+ className?: string;
+ color?: string;
+ onClick?: () => void;
+ tooltip?: string;
+ [x: string]: any;
+}
+
+export function ButtonIcon(props: ButtonIconProps) {
+ const { className, color = theme.darkBlue, tooltip, ...other } = props;
+ const buttonComponent = (
+ <Button
+ className={classNames(className, 'button-icon')}
+ stopPropagation={true}
+ style={{ color }}
+ {...other}
+ />
+ );
+ if (tooltip) {
+ return (
+ <Tooltip mouseEnterDelay={0.4} overlay={tooltip}>
+ {buttonComponent}
+ </Tooltip>
);
- if (tooltip) {
- return (
- <Tooltip overlay={tooltip} mouseEnterDelay={0.4}>
- {buttonComponent}
- </Tooltip>
- );
- }
- return buttonComponent;
}
+ return buttonComponent;
}
interface ActionButtonProps {
};
export function click(element: ShallowWrapper | ReactWrapper, event = {}): void {
- element.simulate('click', { ...mockEvent, ...event });
+ // `type()` returns a component constructor for a composite element and string for DOM nodes
+ if (typeof element.type() === 'function') {
+ element.prop<Function>('onClick')();
+ // TODO find out if `root` is a public api
+ // https://github.com/airbnb/enzyme/blob/master/packages/enzyme/src/ReactWrapper.js#L109
+ (element as any).root().update();
+ } else {
+ element.simulate('click', { ...mockEvent, ...event });
+ }
}
export function clickOutside(event = {}): void {
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>click</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>clickAndWait</td>
- <td>commit</td>
+ <td>[type=submit]</td>
<td></td>
</tr>
<tr>
projects / sonarqube.git / commitdiff