return (
<div className="code-search" id="code-search">
{isPortfolio && (
- <ButtonToggle
- name="portfolio-scope"
- className="big-spacer-right"
- options={[
- {
- value: true,
- label: translate('projects.view.new_code'),
- disabled: !isEmpty(query)
- },
- {
- value: false,
- label: translate('projects.view.overall_code'),
- disabled: !isEmpty(query)
- }
- ]}
- value={newCodeSelected}
- onCheck={this.props.onNewCodeToggle}
- />
+ <span className="big-spacer-right">
+ <ButtonToggle
+ disabled={!isEmpty(query)}
+ options={[
+ {
+ value: true,
+ label: translate('projects.view.new_code')
+ },
+ {
+ value: false,
+ label: translate('projects.view.overall_code')
+ }
+ ]}
+ value={newCodeSelected}
+ onCheck={this.props.onNewCodeToggle}
+ />
+ </span>
)}
<SearchBox
minLength={3}
className="code-search"
id="code-search"
>
- <ButtonToggle
+ <span
className="big-spacer-right"
- disabled={false}
- name="portfolio-scope"
- onCheck={[MockFunction]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "projects.view.new_code",
- "value": true,
- },
- Object {
- "disabled": false,
- "label": "projects.view.overall_code",
- "value": false,
- },
- ]
- }
- value={false}
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[MockFunction]}
+ options={
+ Array [
+ Object {
+ "label": "projects.view.new_code",
+ "value": true,
+ },
+ Object {
+ "label": "projects.view.overall_code",
+ "value": false,
+ },
+ ]
+ }
+ value={false}
+ />
+ </span>
<SearchBox
minLength={3}
onChange={[Function]}
className="code-search"
id="code-search"
>
- <ButtonToggle
+ <span
className="big-spacer-right"
- disabled={false}
- name="portfolio-scope"
- onCheck={[MockFunction]}
- options={
- Array [
- Object {
- "disabled": true,
- "label": "projects.view.new_code",
- "value": true,
- },
- Object {
- "disabled": true,
- "label": "projects.view.overall_code",
- "value": false,
- },
- ]
- }
- value={false}
- />
+ >
+ <ButtonToggle
+ disabled={true}
+ onCheck={[MockFunction]}
+ options={
+ Array [
+ Object {
+ "label": "projects.view.new_code",
+ "value": true,
+ },
+ Object {
+ "label": "projects.view.overall_code",
+ "value": false,
+ },
+ ]
+ }
+ value={false}
+ />
+ </span>
<SearchBox
minLength={3}
onChange={[Function]}
name: 'coding_rules.description_section.title.how_to_fix'
})
);
- expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument();
- expect(screen.getByRole('radio', { name: 'Spring boot' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Spring' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Spring boot' })).toBeInTheDocument();
expect(
- screen.getByRole('radio', { name: 'coding_rules.description_context.other' })
+ screen.getByRole('button', { name: 'coding_rules.description_context.other' })
).toBeInTheDocument();
expect(screen.getByText('coding_rules.description_context.sub_title.Spring')).toBeInTheDocument();
expect(screen.getByText('This is how to fix for spring')).toBeInTheDocument();
- await user.click(screen.getByRole('radio', { name: 'Spring boot' }));
+ await user.click(screen.getByRole('button', { name: 'Spring boot' }));
expect(
screen.getByText('coding_rules.description_context.sub_title.Spring boot')
).toBeInTheDocument();
expect(screen.getByText('This is how to fix for spring boot')).toBeInTheDocument();
- await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context.other' }));
+ await user.click(screen.getByRole('button', { name: 'coding_rules.description_context.other' }));
expect(
screen.queryByText(
'coding_rules.description_context.sub_title.coding_rules.description_context.other'
await user.click(screen.getByRole('button', { name: `issue.tabs.how_to_fix` }));
// Is the context selector present with the expected values and default selection?
- expect(screen.getByRole('radio', { name: 'Context 2' })).toBeInTheDocument();
- expect(screen.getByRole('radio', { name: 'Context 3' })).toBeInTheDocument();
- expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Context 2' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Context 3' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Spring' })).toBeInTheDocument();
expect(
- screen.getByRole('radio', { name: 'coding_rules.description_context.other' })
+ screen.getByRole('button', { name: 'coding_rules.description_context.other' })
).toBeInTheDocument();
- expect(screen.getByRole('radio', { name: 'Spring' })).toBeChecked();
+ expect(screen.getByRole('button', { name: 'Spring' })).toHaveClass('selected');
// Select context 2 and check tab content
- await user.click(screen.getByRole('radio', { name: 'Context 2' }));
+ await user.click(screen.getByRole('button', { name: 'Context 2' }));
expect(screen.getByText('Context 2 content')).toBeInTheDocument();
// Select the "other" context and check tab content
- await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context.other' }));
+ await user.click(screen.getByRole('button', { name: 'coding_rules.description_context.other' }));
expect(screen.getByText('coding_rules.context.others.title')).toBeInTheDocument();
expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument();
expect(screen.getByText('coding_rules.context.others.description.second')).toBeInTheDocument();
{currentUser.isLoggedIn && (
<div className="display-flex-justify-center big-spacer-bottom">
<ButtonToggle
- name="my-issue-filter"
options={[
{ value: true, label: translate('issues.my_issues') },
{ value: false, label: translate('all') }
className="display-flex-justify-center big-spacer-bottom"
>
<ButtonToggle
- disabled={false}
- name="my-issue-filter"
onCheck={[Function]}
options={
Array [
<div className="big-spacer-bottom" id="marketplace-search">
<div className="display-inline-block text-top nowrap abs-width-240 spacer-right">
<ButtonToggle
- name="marketplace-filter"
onCheck={this.handleFilterChange}
options={radioOptions}
value={query.filter}
return (
<div className="display-flex-row">
- <ButtonToggle
- name="users-or-groups"
- onCheck={props.onFilter}
- options={filterOptions}
- value={props.filter}
- />
+ <ButtonToggle onCheck={props.onFilter} options={filterOptions} value={props.filter} />
<div className="flex-1 spacer-left">
<SearchBox
return (
<div className="page-header text-center">
<ButtonToggle
- name="favorite-filter"
options={[
{ value: true, label: translate('my_favorites') },
{ value: false, label: translate('all') }
const notDefaultQualityGate = await screen.findByText('SonarSource way - CFamily');
await user.click(notDefaultQualityGate);
+
+ const projectSelectList = screen.getByRole('group');
// by default it shows "selected" values
- expect(screen.getAllByRole('radio')).toHaveLength(3);
+ expect(within(projectSelectList).getAllByRole('button')).toHaveLength(3);
expect(screen.getAllByRole('checkbox')).toHaveLength(2);
// change tabs to show deselected projects
- await user.click(screen.getByRole('radio', { name: 'quality_gates.projects.without' }));
+ await user.click(
+ within(projectSelectList).getByRole('button', { name: 'quality_gates.projects.without' })
+ );
expect(screen.getAllByRole('checkbox')).toHaveLength(2);
// change tabs to show all projects
- await user.click(screen.getByRole('radio', { name: 'quality_gates.projects.all' }));
+ await user.click(
+ within(projectSelectList).getByRole('button', { name: 'quality_gates.projects.all' })
+ );
expect(screen.getAllByRole('checkbox')).toHaveLength(4);
});
renderQualityGateApp();
const notDefaultQualityGate = await screen.findByText('SonarSource way - CFamily');
+
await user.click(notDefaultQualityGate);
+ const projectSelectList = screen.getByRole('group');
const checkedProjects = screen.getAllByRole('checkbox')[0];
expect(screen.getAllByRole('checkbox')).toHaveLength(2);
await user.click(checkedProjects);
expect(screen.getAllByRole('checkbox')).toHaveLength(1);
// change tabs to show deselected projects
- await user.click(screen.getAllByRole('radio')[1]);
+ await user.click(within(projectSelectList).getAllByRole('button')[1]);
const uncheckedProjects = screen.getAllByRole('checkbox')[0];
expect(screen.getAllByRole('checkbox')).toHaveLength(3);
<h3 className="huge-spacer-right">{translate('hotspot.filters.title')}</h3>
{isLoggedIn(currentUser) && (
- <ButtonToggle
- className="huge-spacer-right"
- name="assignee-filter"
- onCheck={(value: AssigneeFilterOption) =>
- props.onChangeFilters({ assignedToMe: value === AssigneeFilterOption.ME })
- }
- options={assigneeFilterOptions}
- value={
- filters.assignedToMe ? AssigneeFilterOption.ME : AssigneeFilterOption.ALL
- }
- />
+ <span className="huge-spacer-right">
+ <ButtonToggle
+ onCheck={(value: AssigneeFilterOption) =>
+ props.onChangeFilters({ assignedToMe: value === AssigneeFilterOption.ME })
+ }
+ options={assigneeFilterOptions}
+ value={
+ filters.assignedToMe ? AssigneeFilterOption.ME : AssigneeFilterOption.ALL
+ }
+ />
+ </span>
)}
<span className="spacer-right"> {translate('status')} </span>
>
hotspot.filters.title
</h3>
- <ButtonToggle
+ <span
className="huge-spacer-right"
- disabled={false}
- name="assignee-filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "label": "hotspot.filters.assignee.assigned_to_me",
- "value": "me",
- },
- Object {
- "label": "hotspot.filters.assignee.all",
- "value": "all",
- },
- ]
- }
- value="all"
- />
+ >
+ <ButtonToggle
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "hotspot.filters.assignee.assigned_to_me",
+ "value": "me",
+ },
+ Object {
+ "label": "hotspot.filters.assignee.all",
+ "value": "all",
+ },
+ ]
+ }
+ value="all"
+ />
+ </span>
<span
className="spacer-right"
>
>
hotspot.filters.title
</h3>
- <ButtonToggle
+ <span
className="huge-spacer-right"
- disabled={false}
- name="assignee-filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "label": "hotspot.filters.assignee.assigned_to_me",
- "value": "me",
- },
- Object {
- "label": "hotspot.filters.assignee.all",
- "value": "all",
- },
- ]
- }
- value="all"
- />
+ >
+ <ButtonToggle
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "hotspot.filters.assignee.assigned_to_me",
+ "value": "me",
+ },
+ Object {
+ "label": "hotspot.filters.assignee.all",
+ "value": "all",
+ },
+ ]
+ }
+ value="all"
+ />
+ </span>
<span
className="spacer-right"
>
{!isUpdate && (
<div className="display-flex-column">
<strong>{translate('settings.almintegration.form.choose_bitbucket_variant')}</strong>
- <ButtonToggle
- className="little-spacer-top big-spacer-bottom"
- name="variant"
- onCheck={props.onVariantChange}
- options={[
- {
- label: 'Bitbucket Server',
- value: AlmKeys.BitbucketServer
- },
- { label: 'Bitbucket Cloud', value: AlmKeys.BitbucketCloud }
- ]}
- value={variant}
- />
+ <div className="little-spacer-top big-spacer-bottom">
+ <ButtonToggle
+ label={translate('settings.almintegration.form.choose_bitbucket_variant')}
+ onCheck={props.onVariantChange}
+ options={[
+ {
+ label: 'Bitbucket Server',
+ value: AlmKeys.BitbucketServer
+ },
+ { label: 'Bitbucket Cloud', value: AlmKeys.BitbucketCloud }
+ ]}
+ value={variant}
+ />
+ </div>
</div>
)}
<strong>
settings.almintegration.form.choose_bitbucket_variant
</strong>
- <ButtonToggle
+ <div
className="little-spacer-top big-spacer-bottom"
- disabled={false}
- name="variant"
- onCheck={[MockFunction]}
- options={
- Array [
- Object {
- "label": "Bitbucket Server",
- "value": "bitbucket",
- },
- Object {
- "label": "Bitbucket Cloud",
- "value": "bitbucketcloud",
- },
- ]
- }
- value="bitbucketcloud"
- />
+ >
+ <ButtonToggle
+ label="settings.almintegration.form.choose_bitbucket_variant"
+ onCheck={[MockFunction]}
+ options={
+ Array [
+ Object {
+ "label": "Bitbucket Server",
+ "value": "bitbucket",
+ },
+ Object {
+ "label": "Bitbucket Cloud",
+ "value": "bitbucketcloud",
+ },
+ ]
+ }
+ value="bitbucketcloud"
+ />
+ </div>
</div>
<BitbucketCloudForm
formData={
<strong>
settings.almintegration.form.choose_bitbucket_variant
</strong>
- <ButtonToggle
+ <div
className="little-spacer-top big-spacer-bottom"
- disabled={false}
- name="variant"
- onCheck={[MockFunction]}
- options={
- Array [
- Object {
- "label": "Bitbucket Server",
- "value": "bitbucket",
- },
- Object {
- "label": "Bitbucket Cloud",
- "value": "bitbucketcloud",
- },
- ]
- }
- value="bitbucket"
- />
+ >
+ <ButtonToggle
+ label="settings.almintegration.form.choose_bitbucket_variant"
+ onCheck={[MockFunction]}
+ options={
+ Array [
+ Object {
+ "label": "Bitbucket Server",
+ "value": "bitbucket",
+ },
+ Object {
+ "label": "Bitbucket Cloud",
+ "value": "bitbucketcloud",
+ },
+ ]
+ }
+ value="bitbucket"
+ />
+ </div>
</div>
<BitbucketServerForm
formData={
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-.radio-toggle {
- display: inline-block;
- vertical-align: middle;
- font-size: 0;
- white-space: nowrap;
-}
-
-.radio-toggle > li {
- display: inline-block;
- vertical-align: middle;
- font-size: var(--smallFontSize);
-}
-
-.radio-toggle > li:first-child > label {
- border-top-left-radius: 2px;
- border-bottom-left-radius: 2px;
-}
-
-.radio-toggle > li:last-child > label {
- border-top-right-radius: 2px;
- border-bottom-right-radius: 2px;
-}
-
-.radio-toggle > li + li > label {
- border-left: none;
-}
-
-.radio-toggle > li > label {
- display: inline-block;
- padding: 0 12px;
- margin: 0;
- border: 1px solid var(--darkBlue);
- color: var(--darkBlue);
- height: calc(var(--controlHeight) - 2px);
- line-height: calc(var(--controlHeight) - 2px);
- cursor: pointer;
- font-weight: 600;
-}
-
-.radio-toggle input[type='radio'] {
- display: none;
-}
-
-.radio-toggle input[type='radio']:checked + label {
- background-color: var(--darkBlue);
- color: #fff;
-}
-.radio-toggle input[type='radio']:disabled + label {
- color: var(--disableGrayText);
- border-color: var(--disableGrayBorder);
- background: var(--disableGrayBg);
- cursor: not-allowed;
+.button-toggle button:not(:first-child) {
+ margin-left: -1px;
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import classNames from 'classnames';
import * as React from 'react';
+import { Button } from './buttons';
import './ButtonToggle.css';
-import Tooltip from './Tooltip';
export type ButtonToggleValueType = string | number | boolean;
export interface ButtonToggleOption {
- disabled?: boolean;
label: string;
- tooltip?: string;
value: ButtonToggleValueType;
}
-interface Props {
- className?: string;
- name: string;
- onCheck: (value: ButtonToggleValueType) => void;
+export interface ButtonToggleProps {
+ label?: string;
+ disabled?: boolean;
options: ButtonToggleOption[];
value?: ButtonToggleValueType;
+ onCheck: (value: ButtonToggleValueType) => void;
}
-export default class ButtonToggle extends React.PureComponent<Props> {
- static defaultProps = {
- disabled: false,
- value: null
- };
-
- renderOption = (option: ButtonToggleOption) => {
- const checked = option.value === this.props.value;
- const htmlId = `${this.props.name}__${option.value}`;
- return (
- <li key={option.value.toString()}>
- <input
- checked={checked}
- disabled={option.disabled}
- id={htmlId}
- name={this.props.name}
- onChange={() => this.props.onCheck(option.value)}
- type="radio"
- />
- <Tooltip overlay={option.tooltip || undefined}>
- <label htmlFor={htmlId}>{option.label}</label>
- </Tooltip>
- </li>
- );
- };
+export default function ButtonToggle(props: ButtonToggleProps) {
+ const { disabled, label, options, value } = props;
- render() {
- return (
- <ul className={classNames('radio-toggle', this.props.className)}>
- {this.props.options.map(this.renderOption)}
- </ul>
- );
- }
+ return (
+ <span aria-label={label} role="group" className="button-toggle">
+ {options.map(option => (
+ <Button
+ key={option.value.toString()}
+ onClick={() => option.value !== value && props.onCheck(option.value)}
+ disabled={disabled}
+ data-value={option.value}
+ className={classNames({ selected: option.value === value })}>
+ {option.label}
+ </Button>
+ ))}
+ </span>
+ );
}
return (
<div className="select-list">
<div className="display-flex-center">
- <ButtonToggle
- className="select-list-filter spacer-right"
- name="filter"
- onCheck={this.changeFilter}
- options={[
- { disabled, label: labelSelected, value: SelectListFilter.Selected },
- { disabled, label: labelUnselected, value: SelectListFilter.Unselected },
- { disabled, label: labelAll, value: SelectListFilter.All }
- ]}
- value={filter}
- />
+ <span className="select-list-filter spacer-right">
+ <ButtonToggle
+ onCheck={this.changeFilter}
+ disabled={disabled}
+ options={[
+ { label: labelSelected, value: SelectListFilter.Selected },
+ { label: labelUnselected, value: SelectListFilter.Unselected },
+ { label: labelAll, value: SelectListFilter.All }
+ ]}
+ value={filter}
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={this.state.loading}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import * as React from 'react';
-import { change } from '../../../helpers/testUtils';
-import ButtonToggle from '../ButtonToggle';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
+import ButtonToggle, { ButtonToggleProps } from '../ButtonToggle';
-it('renders', () => {
- expect(shallowRender()).toMatchSnapshot();
-});
-
-it('calls onCheck', () => {
+it('should behave properly', async () => {
const onCheck = jest.fn();
- const wrapper = shallowRender({ onCheck });
- change(wrapper.find('input[id="sample__two"]'), '');
- expect(onCheck).toBeCalledWith('two');
-});
+ const user = userEvent.setup();
-it('handles numeric values', () => {
- const onCheck = jest.fn();
- const wrapper = shallowRender({
- onCheck,
- options: [
- { value: 1, label: 'first', tooltip: 'foo' },
- { value: 2, label: 'second', tooltip: 'bar' }
- ],
- value: 1
- });
- change(wrapper.find('input[id="sample__2"]'), '');
- expect(onCheck).toBeCalledWith(2);
-});
+ render({ onCheck });
+ expect(screen.getAllByRole('button')).toHaveLength(3);
-it('handles boolean values', () => {
- const onCheck = jest.fn();
- const wrapper = shallowRender({
- onCheck,
- options: [
- { value: true, label: 'yes', tooltip: 'foo' },
- { value: false, label: 'no', tooltip: 'bar' }
- ],
- value: true
- });
- change(wrapper.find('input[id="sample__false"]'), '');
- expect(onCheck).toBeCalledWith(false);
+ await user.click(screen.getByRole('button', { name: 'first' }));
+ expect(onCheck).toHaveBeenCalledWith('one');
+
+ await user.click(screen.getByRole('button', { name: 'second' }));
+ expect(onCheck).not.toHaveBeenLastCalledWith('two');
});
-it('initialize value', () => {
+it('should behave properly when disabled', async () => {
const onCheck = jest.fn();
- const wrapper = shallowRender({
- onCheck,
- options: [
- { value: 1, label: 'first', tooltip: 'foo' },
- { value: 2, label: 'second', tooltip: 'bar', disabled: true }
- ],
- value: 2
- });
- expect(wrapper.find('input[checked=true]').prop('id')).toBe('sample__2');
-});
+ const user = userEvent.setup();
+
+ render({ disabled: true, onCheck });
-it('accepts advanced options fields', () => {
- expect(
- shallowRender({
- options: [
- { value: 'one', label: 'first', tooltip: 'foo' },
- { value: 'two', label: 'second', tooltip: 'bar', disabled: true }
- ]
- })
- ).toMatchSnapshot();
+ await user.click(screen.getByRole('button', { name: 'first' }));
+ expect(onCheck).not.toHaveBeenCalled();
});
-function shallowRender(props?: Partial<ButtonToggle['props']>) {
- const options = [
- { value: 'one', label: 'first' },
- { value: 'two', label: 'second' }
- ];
- return shallow(<ButtonToggle name="sample" onCheck={() => true} options={options} {...props} />);
+function render(props?: Partial<ButtonToggleProps>) {
+ renderComponent(
+ <ButtonToggle
+ label="test-label"
+ onCheck={jest.fn()}
+ disabled={false}
+ options={[
+ { value: 'one', label: 'first' },
+ { value: 'two', label: 'second' },
+ { value: 'tree', label: 'third' }
+ ]}
+ value="two"
+ {...props}
+ />
+ );
}
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`accepts advanced options fields 1`] = `
-<ul
- className="radio-toggle"
->
- <li
- key="one"
- >
- <input
- checked={false}
- id="sample__one"
- name="sample"
- onChange={[Function]}
- type="radio"
- />
- <Tooltip
- overlay="foo"
- >
- <label
- htmlFor="sample__one"
- >
- first
- </label>
- </Tooltip>
- </li>
- <li
- key="two"
- >
- <input
- checked={false}
- disabled={true}
- id="sample__two"
- name="sample"
- onChange={[Function]}
- type="radio"
- />
- <Tooltip
- overlay="bar"
- >
- <label
- htmlFor="sample__two"
- >
- second
- </label>
- </Tooltip>
- </li>
-</ul>
-`;
-
-exports[`renders 1`] = `
-<ul
- className="radio-toggle"
->
- <li
- key="one"
- >
- <input
- checked={false}
- id="sample__one"
- name="sample"
- onChange={[Function]}
- type="radio"
- />
- <Tooltip>
- <label
- htmlFor="sample__one"
- >
- first
- </label>
- </Tooltip>
- </li>
- <li
- key="two"
- >
- <input
- checked={false}
- id="sample__two"
- name="sample"
- onChange={[Function]}
- type="radio"
- />
- <Tooltip>
- <label
- htmlFor="sample__two"
- >
- second
- </label>
- </Tooltip>
- </li>
-</ul>
-`;
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="deselected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="deselected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={false}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": true,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": true,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": true,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="deselected"
- />
+ >
+ <ButtonToggle
+ disabled={true}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="deselected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={false}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="deselected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="deselected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={false}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="selected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="selected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={true}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="selected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="selected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={true}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="selected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="selected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={true}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="selected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="selected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={false}
<div
className="display-flex-center"
>
- <ButtonToggle
+ <span
className="select-list-filter spacer-right"
- disabled={false}
- name="filter"
- onCheck={[Function]}
- options={
- Array [
- Object {
- "disabled": false,
- "label": "selected",
- "value": "selected",
- },
- Object {
- "disabled": false,
- "label": "unselected",
- "value": "deselected",
- },
- Object {
- "disabled": false,
- "label": "all",
- "value": "all",
- },
- ]
- }
- value="selected"
- />
+ >
+ <ButtonToggle
+ disabled={false}
+ onCheck={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "selected",
+ "value": "selected",
+ },
+ Object {
+ "label": "unselected",
+ "value": "deselected",
+ },
+ Object {
+ "label": "all",
+ "value": "all",
+ },
+ ]
+ }
+ value="selected"
+ />
+ </span>
<SearchBox
autoFocus={true}
loading={false}
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
-.button:hover {
+.button:hover,
+.button.selected {
background: var(--darkBlue);
color: var(--white);
}
)}
</Alert>
)}
- <div>
+ <div className="big-spacer-bottom">
<ButtonToggle
- className="big-spacer-bottom"
- name="filter"
+ label={translate('coding_rules.description_context.title')}
onCheck={this.handleToggleContext}
options={options}
value={selectedContext.displayName}
<>
<span>{translate('onboarding.build')}</span>
<RenderOptions
+ label={translate('onboarding.build')}
checked={buildTechnology}
- name="buildTechnology"
onCheck={value => setBuildTechnology(value as BuildTools)}
optionLabelKey="onboarding.build"
options={buildToolsList}
onboarding.build
</span>
<RenderOptions
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
</span>
<RenderOptions
checked="dotnet"
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
</span>
<RenderOptions
checked="gradle"
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
</span>
<RenderOptions
checked="maven"
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
</span>
<RenderOptions
checked="other"
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
</span>
<RenderOptions
- name="buildTechnology"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
{translate('onboarding.tutorial.with.azure_pipelines.os')}
</span>
<RenderOptions
+ label={translate('onboarding.tutorial.with.azure_pipelines.os')}
checked={os}
- name="os"
onCheck={handlOsChange}
optionLabelKey="onboarding.build.other.os"
options={Object.values(OSs)}
</span>
<RenderOptions
checked="linux"
- name="os"
+ label="onboarding.tutorial.with.azure_pipelines.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
</span>
<RenderOptions
checked="mac"
- name="os"
+ label="onboarding.tutorial.with.azure_pipelines.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
</span>
<RenderOptions
checked="win"
- name="os"
+ label="onboarding.tutorial.with.azure_pipelines.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
export interface RenderOptionsProps {
checked: string | undefined;
- name: string;
+ label?: string;
onCheck: (checked: string) => void;
optionLabelKey: string;
options: string[];
export default function RenderOptions({
checked,
- name,
+ label,
onCheck,
optionLabelKey,
options,
{titleLabelKey && <h4 className="spacer-bottom">{translate(titleLabelKey)}</h4>}
<ButtonToggle
- name={name}
+ label={label}
onCheck={onCheck}
options={options.map(build => ({
label: translate(optionLabelKey, build),
<li className="abs-width-600">
{translate('onboarding.build')}
<RenderOptions
+ label={translate('onboarding.build')}
checked={buildToolSelected}
- name="language"
onCheck={value => setBuildToolSelected(value as BuildTools)}
options={buildTools}
optionLabelKey="onboarding.build"
function shallowRender(props: Partial<RenderOptionsProps> = {}) {
return shallow<RenderOptionsProps>(
<RenderOptions
+ label="test-label"
checked={undefined}
- name="bar"
onCheck={jest.fn()}
optionLabelKey="foo.bar"
options={['foo', 'baz']}
className="big-spacer-top"
>
<ButtonToggle
- disabled={false}
- name="bar"
+ label="test-label"
onCheck={[MockFunction]}
options={
Array [
},
]
}
- value={null}
/>
</div>
`;
className="big-spacer-top"
>
<ButtonToggle
- disabled={false}
- name="bar"
+ label="test-label"
onCheck={[MockFunction]}
options={
Array [
title.key
</h4>
<ButtonToggle
- disabled={false}
- name="bar"
+ label="test-label"
onCheck={[MockFunction]}
options={
Array [
},
]
}
- value={null}
/>
</div>
`;
>
onboarding.build
<RenderOptions
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
>
onboarding.build
<RenderOptions
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
>
onboarding.build
<RenderOptions
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
<li className="abs-width-600">
<span>{translate('onboarding.build.other.os')}</span>
<RenderOptions
+ label={translate('onboarding.build.other.os')}
checked={os}
- name="os"
onCheck={(value: OSs) => setOs(value)}
optionLabelKey="onboarding.build.other.os"
options={Object.values(OSs)}
onboarding.build.other.os
</span>
<RenderOptions
- name="os"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
</span>
<RenderOptions
checked="linux"
- name="os"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
</span>
<RenderOptions
checked="mac"
- name="os"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
</span>
<RenderOptions
checked="win"
- name="os"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
<li>
{translate('onboarding.build')}
<RenderOptions
+ label={translate('onboarding.build')}
checked={buildTool}
- name="buildtool"
onCheck={buildToolSelect}
optionLabelKey="onboarding.build"
options={buildTools}
onboarding.build
<RenderOptions
checked="cfamily"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="dotnet"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="gradle"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="maven"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="other"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
<li>
onboarding.build
<RenderOptions
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
<li>
onboarding.build
<RenderOptions
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
<li>
{translate('onboarding.build')}
<RenderOptions
+ label={translate('onboarding.build')}
checked={buildTool}
- name="buildtool"
onCheck={value => setBuildTool(value as BuildTools)}
optionLabelKey="onboarding.build"
options={buildToolOrder}
renderForm={() => (
<div className="boxed-group-inner">
<ButtonToggle
- name="alm"
+ label={translate('onboarding.tutorial.with.jenkins.alm_selection.title')}
onCheck={props.onCheck}
options={[
AlmKeys.BitbucketCloud,
onboarding.build
<RenderOptions
checked="dotnet"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="gradle"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="maven"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
onboarding.build
<RenderOptions
checked="other"
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
<li>
onboarding.build
<RenderOptions
- name="buildtool"
+ label="onboarding.build"
onCheck={[Function]}
optionLabelKey="onboarding.build"
options={
className="boxed-group-inner"
>
<ButtonToggle
- disabled={false}
- name="alm"
+ label="onboarding.tutorial.with.jenkins.alm_selection.title"
onCheck={[MockFunction]}
options={
Array [
},
]
}
- value={null}
/>
</div>
`;
className="boxed-group-inner"
>
<ButtonToggle
- disabled={false}
- name="alm"
+ label="onboarding.tutorial.with.jenkins.alm_selection.title"
onCheck={[MockFunction]}
options={
Array [
<li className="abs-width-600">
{translate('onboarding.build.other.os')}
<RenderOptions
+ label={translate('onboarding.build.other.os')}
checked={os}
- name="flavorComponent"
optionLabelKey="onboarding.build.other.os"
onCheck={value => setOs(value as OSs)}
options={Object.values(OSs)}
<li>
{translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
<RenderOptions
+ label={translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
checked={flavorComponent}
- name="flavorComponent"
optionLabelKey="onboarding.build.dotnet"
onCheck={value => setFlavorComponet(value as keyof typeof DotNetFlavor)}
options={Object.keys(DotNetFlavor)}
>
onboarding.build.other.os
<RenderOptions
- name="flavorComponent"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
onboarding.build.other.os
<RenderOptions
checked="linux"
- name="flavorComponent"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
onboarding.build.other.os
<RenderOptions
checked="mac"
- name="flavorComponent"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
onboarding.build.other.os
<RenderOptions
checked="win"
- name="flavorComponent"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
<li>
onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent
<RenderOptions
- name="flavorComponent"
+ label="onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent"
onCheck={[Function]}
optionLabelKey="onboarding.build.dotnet"
options={
<div>
<h4 className="spacer-bottom">{translate('onboarding.build')}</h4>
<ButtonToggle
- name="language"
+ label={translate('onboarding.build')}
onCheck={this.handleBuildToolChange}
options={buildTools.map(tool => ({
label: translate('onboarding.build', tool),
{(config.buildTool === BuildTools.Other || config.buildTool === BuildTools.CFamily) && (
<RenderOptions
+ label={translate('onboarding.build.other.os')}
checked={config.os}
- name="os"
onCheck={this.handleOSChange}
optionLabelKey="onboarding.build.other.os"
options={[OSs.Linux, OSs.Windows, OSs.MacOS]}
onboarding.build
</h4>
<ButtonToggle
- disabled={false}
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
options={
Array [
},
]
}
- value={null}
/>
</div>
</Fragment>
onboarding.build
</h4>
<ButtonToggle
- disabled={false}
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
options={
Array [
onboarding.build
</h4>
<ButtonToggle
- disabled={false}
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
options={
Array [
/>
</div>
<RenderOptions
- name="os"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.other.os"
options={
onboarding.build
</h4>
<ButtonToggle
- disabled={false}
- name="language"
+ label="onboarding.build"
onCheck={[Function]}
options={
Array [
},
]
}
- value={null}
/>
</div>
</Fragment>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { translate } from '../../../../helpers/l10n';
import { Component } from '../../../../types/types';
import RenderOptions from '../../components/RenderOptions';
import DotNetCore from './DotNetCore';
return (
<>
<RenderOptions
+ label={translate('onboarding.build.other.os')}
checked={variant}
- name="variant"
onCheck={value => setVariant(value as Variant)}
optionLabelKey="onboarding.build.dotnet.variant"
options={['dotnet_core', 'dotnet_framework']}
<Fragment>
<RenderOptions
checked="dotnet_core"
- name="variant"
+ label="onboarding.build.other.os"
onCheck={[Function]}
optionLabelKey="onboarding.build.dotnet.variant"
options={
projects / sonarqube.git / commitdiff