import { Link } from 'react-router';
import RuleDetailsTagsPopup from './RuleDetailsTagsPopup';
import SimilarRulesFilter from './SimilarRulesFilter';
-import { Query } from '../query';
-import { getRuleUrl } from '../../../helpers/urls';
-import LinkIcon from '../../../components/icons-components/LinkIcon';
-import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
-import Tooltip from '../../../components/controls/Tooltip';
+import DateFormatter from '../../../components/intl/DateFormatter';
import DocTooltip from '../../../components/docs/DocTooltip';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import Dropdown from '../../../components/controls/Dropdown';
import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
+import LinkIcon from '../../../components/icons-components/LinkIcon';
+import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
import SeverityHelper from '../../../components/shared/SeverityHelper';
-import Dropdown from '../../../components/controls/Dropdown';
import TagsList from '../../../components/tags/TagsList';
-import DateFormatter from '../../../components/intl/DateFormatter';
-import { Button } from '../../../components/ui/buttons';
+import Tooltip from '../../../components/controls/Tooltip';
+import { ButtonLink } from '../../../components/ui/buttons';
import { PopupPlacement } from '../../../components/ui/popups';
+import { Query } from '../query';
+import { getRuleUrl } from '../../../helpers/urls';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
canWrite: boolean | undefined;
/>
}
overlayPlacement={PopupPlacement.BottomLeft}>
- <Button className="button-link">
+ <ButtonLink>
<TagsList
allowUpdate={canWrite}
tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
/>
- </Button>
+ </ButtonLink>
</Dropdown>
) : (
<TagsList
};
it('should display right meta info', () => {
- expect(getWrapper()).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
expect(
- getWrapper({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE })
+ shallowRender({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE })
).toMatchSnapshot();
expect(
- getWrapper({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE_WITH_DATA })
+ shallowRender({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE_WITH_DATA })
).toMatchSnapshot();
});
it('should edit tags', () => {
const onTagsChange = jest.fn();
- const wrapper = getWrapper({ onTagsChange });
+ const wrapper = shallowRender({ onTagsChange });
expect(wrapper.find('[data-meta="tags"]')).toMatchSnapshot();
const overlay = wrapper
.find('[data-meta="tags"]')
expect(onTagsChange).toBeCalledWith(['foo', 'bar']);
});
-function getWrapper(props = {}) {
+function shallowRender(props: Partial<RuleDetailsMeta['props']> = {}) {
return shallow(
<RuleDetailsMeta
canWrite={true}
}
overlayPlacement="bottom-left"
>
- <Button
- className="button-link"
- >
+ <ButtonLink>
<TagsList
allowUpdate={true}
tags={
]
}
/>
- </Button>
+ </ButtonLink>
</Dropdown>
</li>
<li
}
overlayPlacement="bottom-left"
>
- <Button
- className="button-link"
- >
+ <ButtonLink>
<TagsList
allowUpdate={true}
tags={
]
}
/>
- </Button>
+ </ButtonLink>
</Dropdown>
</li>
<Tooltip
}
overlayPlacement="bottom-left"
>
- <Button
- className="button-link"
- >
+ <ButtonLink>
<TagsList
allowUpdate={true}
tags={
]
}
/>
- </Button>
+ </ButtonLink>
</Dropdown>
</li>
`;
<ResetButtonLink
onClick={[Function]}
>
- <Button
- className="button-link"
+ <ButtonLink
onClick={[Function]}
type="reset"
>
- <button
- className="button button-link"
+ <Button
+ className="button-link"
onClick={[Function]}
type="reset"
>
- Done
- </button>
- </Button>
+ <button
+ className="button button-link"
+ onClick={[Function]}
+ type="reset"
+ >
+ Done
+ </button>
+ </Button>
+ </ButtonLink>
</ResetButtonLink>
</footer>
</div>
*/
import * as React from 'react';
import PluginChangeLog from './PluginChangeLog';
-import { Release, Update } from '../../../api/plugins';
-import EllipsisIcon from '../../../components/icons-components/EllipsisIcon';
import Dropdown from '../../../components/controls/Dropdown';
-import { Button } from '../../../components/ui/buttons';
+import EllipsisIcon from '../../../components/icons-components/EllipsisIcon';
+import { ButtonLink } from '../../../components/ui/buttons';
+import { Release, Update } from '../../../api/plugins';
interface Props {
release: Release;
<Dropdown
className="display-inline-block little-spacer-left"
overlay={<PluginChangeLog release={release} update={update} />}>
- <Button className="button-link js-changelog issue-rule">
+ <ButtonLink className="js-changelog issue-rule">
<EllipsisIcon />
- </Button>
+ </ButtonLink>
</Dropdown>
);
}
*/
import * as React from 'react';
import MetaTagsSelector from './MetaTagsSelector';
-import { setProjectTags } from '../../../api/components';
-import { translate } from '../../../helpers/l10n';
-import TagsList from '../../../components/tags/TagsList';
-import { Button } from '../../../components/ui/buttons';
import Dropdown from '../../../components/controls/Dropdown';
+import TagsList from '../../../components/tags/TagsList';
+import { ButtonLink } from '../../../components/ui/buttons';
import { PopupPlacement } from '../../../components/ui/popups';
+import { setProjectTags } from '../../../api/components';
+import { translate } from '../../../helpers/l10n';
interface Props {
component: T.Component;
/>
}
overlayPlacement={PopupPlacement.BottomLeft}>
- <Button
- className="button-link"
- innerRef={tagsList => (this.tagsList = tagsList)}
- stopPropagation={true}>
+ <ButtonLink innerRef={tagsList => (this.tagsList = tagsList)} stopPropagation={true}>
<TagsList allowUpdate={true} tags={tags.length ? tags : [translate('no_tags')]} />
- </Button>
+ </ButtonLink>
</Dropdown>
</div>
);
}
overlayPlacement="bottom-left"
>
- <Button
- className="button-link"
+ <ButtonLink
innerRef={[Function]}
stopPropagation={true}
>
]
}
/>
- </Button>
+ </ButtonLink>
</Dropdown>
</div>
`;
)}
{hasValueChanged && (
- <Button className="spacer-right button-link" onClick={this.props.onCancel}>
+ <ResetButtonLink className="spacer-right" onClick={this.props.onCancel}>
{translate('cancel')}
- </Button>
+ </ResetButtonLink>
)}
{showReset && (
>
save
</Button>
- <Button
- className="spacer-right button-link"
+ <ResetButtonLink
+ className="spacer-right"
onClick={[Function]}
>
cancel
- </Button>
+ </ResetButtonLink>
</div>
</Fragment>
`;
>
save
</Button>
- <Button
- className="spacer-right button-link"
+ <ResetButtonLink
+ className="spacer-right"
onClick={[Function]}
>
cancel
- </Button>
+ </ResetButtonLink>
</div>
</Fragment>
`;
>
save
</Button>
- <Button
- className="spacer-right button-link"
+ <ResetButtonLink
+ className="spacer-right"
onClick={[Function]}
>
cancel
- </Button>
+ </ResetButtonLink>
</div>
</Fragment>
`;
>
save
</Button>
- <Button
- className="spacer-right button-link"
+ <ResetButtonLink
+ className="spacer-right"
onClick={[Function]}
>
cancel
- </Button>
+ </ResetButtonLink>
</div>
</Fragment>
`;
import { SystemUpgrade } from '../../../../api/system';
import Modal from '../../../../components/controls/Modal';
import { translate } from '../../../../helpers/l10n';
+import { ResetButtonLink } from '../../../../components/ui/buttons';
interface Props {
systemUpgrades: SystemUpgrade[][];
export default class SystemUpgradeForm extends React.PureComponent<Props, State> {
state: State = { upgrading: false };
- handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
- event.preventDefault();
- event.stopPropagation();
- this.props.onClose();
- };
-
render() {
const { upgrading } = this.state;
const { systemUpgrades } = this.props;
</div>
<div className="modal-foot">
{upgrading && <i className="spinner spacer-right" />}
- <a className="pull-left" href="https://www.sonarqube.org/downloads/" target="_blank">
+ <a
+ className="pull-left"
+ href="https://www.sonarqube.org/downloads/"
+ rel="noopener noreferrer"
+ target="_blank">
{translate('system.see_sonarqube_downloads')}
</a>
- <a href="#" onClick={this.handleCancelClick}>
- {translate('cancel')}
- </a>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</div>
</Modal>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
import DateFormatter from '../../../../components/intl/DateFormatter';
+import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
+import { ButtonLink } from '../../../../components/ui/buttons';
import { SystemUpgrade } from '../../../../api/system';
import { translate } from '../../../../helpers/l10n';
export default class SystemUpgradeIntermediate extends React.PureComponent<Props, State> {
state: State = { showMore: false };
- toggleIntermediatVersions = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- event.stopPropagation();
+ toggleIntermediatVersions = () => {
this.setState(state => ({ showMore: !state.showMore }));
};
return (
<div className={this.props.className}>
- <a
- className="button-link little-spacer-bottom"
- href="#"
- onClick={this.toggleIntermediatVersions}>
+ <ButtonLink className="little-spacer-bottom" onClick={this.toggleIntermediatVersions}>
{showMore
? translate('system.hide_intermediate_versions')
: translate('system.show_intermediate_versions')}
<DropdownIcon className="little-spacer-left" turned={showMore} />
- </a>
+ </ButtonLink>
{showMore &&
upgrades.map(upgrade => (
<div className="note system-upgrade-intermediate" key={upgrade.version}>
<b className="little-spacer-right">SonarQube {upgrade.version}</b>
{formattedDate}
{upgrade.changeLogUrl && (
- <a className="spacer-left" href={upgrade.changeLogUrl} target="_blank">
+ <a
+ className="spacer-left"
+ href={upgrade.changeLogUrl}
+ rel="noopener noreferrer"
+ target="_blank">
{translate('system.release_notes')}
</a>
)}
)}
</DateFormatter>
{lastUpgrade.changeLogUrl && (
- <a className="spacer-left" href={lastUpgrade.changeLogUrl} target="_blank">
+ <a
+ className="spacer-left"
+ href={lastUpgrade.changeLogUrl}
+ rel="noopener noreferrer"
+ target="_blank">
{translate('system.release_notes')}
</a>
)}
it('should allow to show and hide intermediates', () => {
const wrapper = shallow(<SystemUpgradeIntermediate upgrades={UPGRADES} />);
expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeFalsy();
- click(wrapper.find('a'));
+ click(wrapper.find('ButtonLink'));
expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeTruthy();
- click(wrapper.find('a'));
+ click(wrapper.find('ButtonLink'));
expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeFalsy();
});
<a
className="pull-left"
href="https://www.sonarqube.org/downloads/"
+ rel="noopener noreferrer"
target="_blank"
>
system.see_sonarqube_downloads
</a>
- <a
- href="#"
- onClick={[Function]}
+ <ResetButtonLink
+ onClick={[MockFunction]}
>
cancel
- </a>
+ </ResetButtonLink>
</div>
</Modal>
`;
exports[`should display correctly 1`] = `
<div>
- <a
- className="button-link little-spacer-bottom"
- href="#"
+ <ButtonLink
+ className="little-spacer-bottom"
onClick={[Function]}
>
system.show_intermediate_versions
className="little-spacer-left"
turned={false}
/>
- </a>
+ </ButtonLink>
</div>
`;
exports[`should display correctly 2`] = `
<div>
- <a
- className="button-link little-spacer-bottom"
- href="#"
+ <ButtonLink
+ className="little-spacer-bottom"
onClick={[Function]}
>
system.hide_intermediate_versions
className="little-spacer-left"
turned={true}
/>
- </a>
+ </ButtonLink>
<div
className="note system-upgrade-intermediate"
key="5.6.6"
<a
className="spacer-left"
href="changelogurl"
+ rel="noopener noreferrer"
target="_blank"
>
system.release_notes
*/
import * as React from 'react';
import DeliveryAccordion from './DeliveryAccordion';
-import { Button } from '../../../components/ui/buttons';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import ListFooter from '../../../components/controls/ListFooter';
import Modal from '../../../components/controls/Modal';
-import { translateWithParameters, translate } from '../../../helpers/l10n';
+import { ResetButtonLink } from '../../../components/ui/buttons';
import { searchDeliveries } from '../../../api/webhooks';
+import { translateWithParameters, translate } from '../../../helpers/l10n';
interface Props {
onClose: () => void;
)}
</div>
<footer className="modal-foot">
- <Button className="button-link js-modal-close" onClick={this.props.onClose}>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('close')}
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
);
*/
import * as React from 'react';
import DeliveryItem from './DeliveryItem';
-import { Button } from '../../../components/ui/buttons';
import Modal from '../../../components/controls/Modal';
-import { translateWithParameters, translate } from '../../../helpers/l10n';
+import { ResetButtonLink } from '../../../components/ui/buttons';
import { getDelivery } from '../../../api/webhooks';
+import { translateWithParameters, translate } from '../../../helpers/l10n';
interface Props {
delivery: T.WebhookDelivery;
payload={payload}
/>
<footer className="modal-foot">
- <Button className="button-link js-modal-close" onClick={this.props.onClose}>
+ <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
{translate('close')}
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
);
<footer
className="modal-foot"
>
- <Button
- className="button-link js-modal-close"
+ <ResetButtonLink
+ className="js-modal-close"
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <Button
- className="button-link js-modal-close"
+ <ResetButtonLink
+ className="js-modal-close"
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <Button
- className="button-link js-modal-close"
+ <ResetButtonLink
+ className="js-modal-close"
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <Button
- className="button-link js-modal-close"
+ <ResetButtonLink
+ className="js-modal-close"
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
import { Link } from 'react-router';
import { keyBy, sortBy, groupBy } from 'lodash';
import MeasuresOverlayMeasure from './MeasuresOverlayMeasure';
-import { Button } from '../../ui/buttons';
+import { ResetButtonLink } from '../../ui/buttons';
import { getFacets } from '../../../api/issues';
import { getMeasures } from '../../../api/measures';
import { getAllMetrics } from '../../../api/metrics';
</div>
<footer className="modal-foot">
- <Button className="button-link" onClick={this.props.onClose}>
- {translate('close')}
- </Button>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('close')}</ResetButtonLink>
</footer>
</Modal>
);
<footer
className="modal-foot"
>
- <Button
- className="button-link"
+ <ResetButtonLink
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <Button
- className="button-link"
+ <ResetButtonLink
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
<footer
className="modal-foot"
>
- <Button
- className="button-link"
+ <ResetButtonLink
onClick={[MockFunction]}
>
close
- </Button>
+ </ResetButtonLink>
</footer>
</Modal>
`;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SetAssigneePopup from '../popups/SetAssigneePopup';
import Avatar from '../../ui/Avatar';
-import Toggler from '../../controls/Toggler';
import DropdownIcon from '../../icons-components/DropdownIcon';
-import { Button } from '../../ui/buttons';
+import SetAssigneePopup from '../popups/SetAssigneePopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
onRequestClose={this.handleClose}
open={this.props.isOpen && this.props.canAssign}
overlay={<SetAssigneePopup issue={this.props.issue} onSelect={this.props.onAssign} />}>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-assign"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-assign"
onClick={this.toggleAssign}>
{this.renderAssignee()}
<DropdownIcon className="little-spacer-left" />
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
*/
import * as React from 'react';
import ChangelogPopup from '../popups/ChangelogPopup';
-import DropdownIcon from '../../icons-components/DropdownIcon';
import DateFromNow from '../../intl/DateFromNow';
import DateTimeFormatter from '../../intl/DateTimeFormatter';
+import DropdownIcon from '../../icons-components/DropdownIcon';
import Toggler from '../../controls/Toggler';
import Tooltip from '../../controls/Tooltip';
-import { Button } from '../../ui/buttons';
+import { ButtonLink } from '../../ui/buttons';
interface Props {
isOpen: boolean;
<Tooltip
mouseEnterDelay={0.5}
overlay={<DateTimeFormatter date={this.props.creationDate} />}>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-show-changelog"
onClick={this.handleClick}>
<span className="issue-meta-label">
<DateFromNow date={this.props.creationDate} />
</span>
<DropdownIcon className="little-spacer-left" />
- </Button>
+ </ButtonLink>
</Tooltip>
</Toggler>
</div>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { updateIssue } from '../actions';
-import Toggler from '../../controls/Toggler';
-import { Button } from '../../ui/buttons';
import CommentPopup from '../popups/CommentPopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
import { addIssueComment } from '../../../api/issues';
import { translate } from '../../../helpers/l10n';
+import { updateIssue } from '../actions';
interface Props {
commentPlaceholder: string;
toggleComment={this.props.toggleComment}
/>
}>
- <Button
- className="button-link issue-action js-issue-comment"
- onClick={this.handleCommentClick}>
+ <ButtonLink className="issue-action js-issue-comment" onClick={this.handleCommentClick}>
<span className="issue-meta-label">{translate('issue.comment.formlink')}</span>
- </Button>
+ </ButtonLink>
</Toggler>
</li>
);
import * as React from 'react';
import EllipsisIcon from '../../icons-components/EllipsisIcon';
import Tooltip from '../../controls/Tooltip';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Button } from '../../ui/buttons';
+import { ButtonLink } from '../../ui/buttons';
import { WorkspaceContextShape } from '../../workspace/context';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
interface Props {
engine?: string;
return (
<div className="issue-message">
{this.props.message}
- <Button
+ <ButtonLink
aria-label={translate('issue.rule_details')}
- className="button-link issue-rule little-spacer-left"
+ className="issue-rule little-spacer-left"
onClick={this.handleClick}>
<EllipsisIcon />
- </Button>
+ </ButtonLink>
{this.props.engine && (
<Tooltip
overlay={translateWithParameters('issue.from_external_rule_engine', this.props.engine)}>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SetSeverityPopup from '../popups/SetSeverityPopup';
-import { setIssueSeverity, IssueResponse } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
import DropdownIcon from '../../icons-components/DropdownIcon';
+import SetSeverityPopup from '../popups/SetSeverityPopup';
import SeverityHelper from '../../shared/SeverityHelper';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueSeverity, IssueResponse } from '../../../api/issues';
import { RawQuery } from '../../../helpers/query';
interface Props {
onRequestClose={this.handleClose}
open={this.props.isOpen && this.props.canSetSeverity}
overlay={<SetSeverityPopup issue={issue} onSelect={this.setSeverity} />}>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-severity"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-severity"
onClick={this.toggleSetSeverity}>
<SeverityHelper className="issue-meta-label" severity={issue.severity} />
<DropdownIcon className="little-spacer-left" />
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { updateIssue } from '../actions';
import SetIssueTagsPopup from '../popups/SetIssueTagsPopup';
-import { setIssueTags } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
import TagsList from '../../tags/TagsList';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueTags } from '../../../api/issues';
import { translate } from '../../../helpers/l10n';
+import { updateIssue } from '../actions';
interface Props {
canSetTags: boolean;
setTags={this.setTags}
/>
}>
- <Button
- className={'js-issue-edit-tags button-link issue-action issue-action-with-options'}
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-edit-tags"
onClick={this.toggleSetTags}>
<TagsList
allowUpdate={this.props.canSetTags}
issue.tags && issue.tags.length > 0 ? issue.tags : [translate('issue.no_tag')]
}
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { updateIssue } from '../actions';
-import SetTransitionPopup from '../popups/SetTransitionPopup';
-import { setIssueTransition } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
import DropdownIcon from '../../icons-components/DropdownIcon';
+import SetTransitionPopup from '../popups/SetTransitionPopup';
import StatusHelper from '../../shared/StatusHelper';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueTransition } from '../../../api/issues';
+import { updateIssue } from '../actions';
interface Props {
hasTransitions: boolean;
overlay={
<SetTransitionPopup onSelect={this.setTransition} transitions={issue.transitions} />
}>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-transition"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-transition"
onClick={this.toggleSetTransition}>
<StatusHelper
className="issue-meta-label"
status={issue.status}
/>
<DropdownIcon className="little-spacer-left" />
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SetTypePopup from '../popups/SetTypePopup';
-import { setIssueType, IssueResponse } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
import DropdownIcon from '../../icons-components/DropdownIcon';
-import { Button } from '../../ui/buttons';
import IssueTypeIcon from '../../ui/IssueTypeIcon';
+import SetTypePopup from '../popups/SetTypePopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueType, IssueResponse } from '../../../api/issues';
import { translate } from '../../../helpers/l10n';
import { RawQuery } from '../../../helpers/query';
onRequestClose={this.handleClose}
open={this.props.isOpen && this.props.canSetType}
overlay={<SetTypePopup issue={issue} onSelect={this.setType} />}>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-type"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-type"
onClick={this.toggleSetType}>
<IssueTypeIcon className="little-spacer-right" query={issue.type} />
{translate('issue.type', issue.type)}
<DropdownIcon className="little-spacer-left" />
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SimilarIssuesPopup from '../popups/SimilarIssuesPopup';
-import Toggler from '../../controls/Toggler';
import DropdownIcon from '../../icons-components/DropdownIcon';
import FilterIcon from '../../icons-components/FilterIcon';
-import { Button } from '../../ui/buttons';
+import SimilarIssuesPopup from '../popups/SimilarIssuesPopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
import { translate } from '../../../helpers/l10n';
interface Props {
onRequestClose={this.handleClose}
open={this.props.isOpen}
overlay={<SimilarIssuesPopup issue={this.props.issue} onFilter={this.handleFilter} />}>
- <Button
+ <ButtonLink
aria-label={translate('issue.filter_similar_issues')}
- className="js-issue-filter button-link issue-action issue-action-with-options"
+ className="issue-action issue-action-with-options js-issue-filter"
onClick={this.togglePopup}
title={translate('issue.filter_similar_issues')}>
<FilterIcon className="icon-half-transparent" />
<DropdownIcon className="icon-half-transparent" />
- </Button>
+ </ButtonLink>
</Toggler>
</div>
);
};
it('should render without the action when the correct rights are missing', () => {
- const element = shallow(
- <IssueAssign
- canAssign={false}
- isOpen={false}
- issue={issue}
- onAssign={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender({ canAssign: false })).toMatchSnapshot();
});
it('should render with the action', () => {
- const element = shallow(
- <IssueAssign
- canAssign={true}
- isOpen={false}
- issue={issue}
- onAssign={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueAssign['props']> = {}) {
+ return shallow(
<IssueAssign
canAssign={true}
isOpen={false}
issue={issue}
onAssign={jest.fn()}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
};
it('should render correctly', () => {
- const element = shallow(
- <IssueChangelog
- creationDate="2017-03-01T09:36:01+0100"
- isOpen={false}
- issue={issue}
- togglePopup={jest.fn()}
- />
- );
+ const element = shallowRender();
expect(element).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueChangelog['props']> = {}) {
+ return shallow(
<IssueChangelog
creationDate="2017-03-01T09:36:01+0100"
isOpen={false}
issue={issue}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
import { click } from '../../../../helpers/testUtils';
it('should render correctly', () => {
- const element = shallow(
- <IssueCommentAction
- commentPlaceholder=""
- issueKey="issue-key"
- onChange={jest.fn()}
- toggleComment={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const toggleComment = jest.fn();
+ const element = shallowRender({ toggleComment });
+ click(element.find('ButtonLink'));
+ expect(toggleComment.mock.calls.length).toBe(1);
+ element.setProps({ currentPopup: 'comment' });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueCommentAction['props']> = {}) {
+ return shallow(
<IssueCommentAction
commentPlaceholder=""
issueKey="issue-key"
onChange={jest.fn()}
- toggleComment={toggle}
+ toggleComment={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls.length).toBe(1);
- element.setProps({ currentPopup: 'comment' });
- expect(element).toMatchSnapshot();
-});
+}
import IssueSeverity from '../IssueSeverity';
import { click } from '../../../../helpers/testUtils';
-const issue = {
- severity: 'BLOCKER'
-};
+const issue = { severity: 'BLOCKER' };
it('should render without the action when the correct rights are missing', () => {
- const element = shallow(
- <IssueSeverity
- canSetSeverity={false}
- isOpen={false}
- issue={issue}
- setIssueProperty={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender({ canSetSeverity: false })).toMatchSnapshot();
});
it('should render with the action', () => {
- const element = shallow(
- <IssueSeverity
- canSetSeverity={true}
- isOpen={false}
- issue={issue}
- setIssueProperty={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueSeverity['props']> = {}) {
+ return shallow(
<IssueSeverity
canSetSeverity={true}
isOpen={false}
issue={issue}
setIssueProperty={jest.fn()}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
import IssueTags from '../IssueTags';
import { click } from '../../../../helpers/testUtils';
-const issue = {
- key: 'issuekey',
- projectOrganization: 'foo',
- tags: ['mytag', 'test']
-};
+const issue = { key: 'issuekey', projectOrganization: 'foo', tags: ['mytag', 'test'] };
it('should render without the action when the correct rights are missing', () => {
- const element = shallow(
- <IssueTags
- canSetTags={false}
- isOpen={false}
- issue={{ ...issue, tags: [] }}
- onChange={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender({ canSetTags: false, issue: { ...issue, tags: [] } })).toMatchSnapshot();
});
it('should render with the action', () => {
- const element = shallow(
- <IssueTags
- canSetTags={true}
- isOpen={false}
- issue={issue}
- onChange={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueTags['props']> = {}) {
+ return shallow(
<IssueTags
canSetTags={true}
isOpen={false}
issue={issue}
onChange={jest.fn()}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
};
it('should render without the action when there is no transitions', () => {
- const element = shallow(
- <IssueTransition
- hasTransitions={false}
- isOpen={false}
- issue={{
- key: 'foo1234',
- transitions: [],
- status: 'CLOSED'
- }}
- onChange={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(
+ shallowRender({
+ hasTransitions: false,
+ issue: { key: 'foo1234', transitions: [], status: 'CLOSED' }
+ })
+ ).toMatchSnapshot();
});
it('should render with the action', () => {
- const element = shallow(
- <IssueTransition
- hasTransitions={true}
- isOpen={false}
- issue={issue}
- onChange={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should render with a resolution', () => {
- const element = shallow(
- <IssueTransition
- hasTransitions={true}
- isOpen={false}
- issue={{
+ expect(
+ shallowRender({
+ issue: {
key: 'foo1234',
transitions: ['reopen'],
status: 'RESOLVED',
resolution: 'FIXED'
- }}
- onChange={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ }
+ })
+ ).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueTransition['props']> = {}) {
+ return shallow(
<IssueTransition
hasTransitions={true}
isOpen={false}
issue={issue}
onChange={jest.fn()}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
import IssueType from '../IssueType';
import { click } from '../../../../helpers/testUtils';
-const issue: Pick<T.Issue, 'type'> = {
- type: 'BUG'
-};
+const issue: Pick<T.Issue, 'type'> = { type: 'BUG' };
it('should render without the action when the correct rights are missing', () => {
- const element = shallow(
- <IssueType
- canSetType={false}
- isOpen={false}
- issue={issue}
- setIssueProperty={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender({ canSetType: false })).toMatchSnapshot();
});
it('should render with the action', () => {
- const element = shallow(
- <IssueType
- canSetType={true}
- isOpen={false}
- issue={issue}
- setIssueProperty={jest.fn()}
- togglePopup={jest.fn()}
- />
- );
- expect(element).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should open the popup when the button is clicked', () => {
- const toggle = jest.fn();
- const element = shallow(
+ const togglePopup = jest.fn();
+ const element = shallowRender({ togglePopup });
+ click(element.find('ButtonLink'));
+ expect(togglePopup.mock.calls).toMatchSnapshot();
+ element.setProps({ isOpen: true });
+ expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueType['props']> = {}) {
+ return shallow(
<IssueType
canSetType={true}
isOpen={false}
issue={issue}
setIssueProperty={jest.fn()}
- togglePopup={toggle}
+ togglePopup={jest.fn()}
+ {...props}
/>
);
- click(element.find('Button'));
- expect(toggle.mock.calls).toMatchSnapshot();
- element.setProps({ isOpen: true });
- expect(element).toMatchSnapshot();
-});
+}
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-assign"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-assign"
onClick={[Function]}
>
<span>
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-assign"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-assign"
onClick={[Function]}
>
<span>
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-show-changelog"
onClick={[Function]}
>
<span
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Tooltip>
</Toggler>
</div>
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-show-changelog"
onClick={[Function]}
>
<span
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Tooltip>
</Toggler>
</div>
/>
}
>
- <Button
- className="button-link issue-action js-issue-comment"
+ <ButtonLink
+ className="issue-action js-issue-comment"
onClick={[Function]}
>
<span
>
issue.comment.formlink
</span>
- </Button>
+ </ButtonLink>
</Toggler>
</li>
`;
/>
}
>
- <Button
- className="button-link issue-action js-issue-comment"
+ <ButtonLink
+ className="issue-action js-issue-comment"
onClick={[Function]}
>
<span
>
issue.comment.formlink
</span>
- </Button>
+ </ButtonLink>
</Toggler>
</li>
`;
className="issue-message"
>
Reduce the number of conditional operators (4) used in the expression
- <Button
+ <ButtonLink
aria-label="issue.rule_details"
- className="button-link issue-rule little-spacer-left"
+ className="issue-rule little-spacer-left"
onClick={[Function]}
>
<EllipsisIcon />
- </Button>
+ </ButtonLink>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-severity"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-severity"
onClick={[Function]}
>
<SeverityHelper
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-severity"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-severity"
onClick={[Function]}
>
<SeverityHelper
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="js-issue-edit-tags button-link issue-action issue-action-with-options"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-edit-tags"
onClick={[Function]}
>
<TagsList
]
}
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="js-issue-edit-tags button-link issue-action issue-action-with-options"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-edit-tags"
onClick={[Function]}
>
<TagsList
]
}
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-transition"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-transition"
onClick={[Function]}
>
<StatusHelper
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-transition"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-transition"
onClick={[Function]}
>
<StatusHelper
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-transition"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-transition"
onClick={[Function]}
>
<StatusHelper
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-type"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-type"
onClick={[Function]}
>
<IssueTypeIcon
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/>
}
>
- <Button
- className="button-link issue-action issue-action-with-options js-issue-set-type"
+ <ButtonLink
+ className="issue-action issue-action-with-options js-issue-set-type"
onClick={[Function]}
>
<IssueTypeIcon
<DropdownIcon
className="little-spacer-left"
/>
- </Button>
+ </ButtonLink>
</Toggler>
</div>
`;
/* #region .button-link */
.button-link {
- display: inline;
+ display: inline-flex;
height: auto; /* Keep this to not inherit the height from .button */
line-height: 1;
margin: 0;
}
}
+export function ButtonLink({ className, ...props }: ButtonProps) {
+ return <Button {...props} className={classNames('button-link', className)} />;
+}
+
export function SubmitButton(props: T.Omit<ButtonProps, 'type'>) {
// do not prevent default to actually submit a form
return <Button {...props} preventDefault={false} type="submit" />;
}
-export function ResetButtonLink({ className, ...props }: T.Omit<ButtonProps, 'type'>) {
- return <Button {...props} className={classNames('button-link', className)} type="reset" />;
+export function ResetButtonLink(props: T.Omit<ButtonProps, 'type'>) {
+ return <ButtonLink {...props} type="reset" />;
}
interface ButtonIconProps {
projects / sonarqube.git / commitdiff