github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v14.9.0 (#49678)

Browse source 
* eui to 14.9.0

* euiswitch updtates

* misc snapshot

* x-pack functional fixes

* more euiswitch functional test fixes

* label-less switches for spaces management

* more euiswitch fixes

* telemetry form a11y

* snapshot update

* label updates

* more switch updates

* lint
This commit is contained in:
Greg Thompson 2019-11-13 14:54:21 -06:00 • committed by GitHub
parent 1010f285b3
commit 998b0e6fd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 542 additions and 435 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -109,7 +109,7 @@
"@elastic/charts": "^14.0.0",
"@elastic/datemath": "5.0.2",
"@elastic/ems-client": "1.0.5",
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"@elastic/filesaver": "1.1.2",
"@elastic/good": "8.1.1-kibana2",
"@elastic/numeral": "2.3.3",

3
src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
View file

@ -30,6 +30,7 @@ import {
EuiPopoverTitle,
EuiSpacer,
EuiSwitch,
EuiSwitchEvent,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@ -431,7 +432,7 @@ class FilterEditorUI extends Component<Props, State> {
this.setState({ selectedOperator, params });
};
private onCustomLabelSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
private onCustomLabelSwitchChange = (event: EuiSwitchEvent) => {
const useCustomLabel = event.target.checked;
const customLabel = event.target.checked ? '' : null;
this.setState({ useCustomLabel, customLabel });

6
src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
View file

@ -236,7 +236,7 @@ test('handleCheckboxOptionChange - multiselect', async () => {
component.update();
const checkbox = findTestSubject(component, 'listControlMultiselectInput');
checkbox.simulate('change', { target: { checked: true } });
checkbox.simulate('click');
sinon.assert.notCalled(handleFieldNameChange);
sinon.assert.notCalled(handleIndexPatternChange);
sinon.assert.notCalled(handleNumberOptionChange);
@ -247,7 +247,9 @@ test('handleCheckboxOptionChange - multiselect', async () => {
expectedControlIndex,
expectedOptionName,
sinon.match((evt) => {
if (evt.target.checked === true) {
// Synthetic `evt.target.checked` does not get altered by EuiSwitch,
// but its aria attribute is correctly updated
if (evt.target.getAttribute('aria-checked') === 'true') {
return true;
}
return false;

12
src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
View file

@ -47,8 +47,8 @@ describe('OptionsTab', () => {
it('should update updateFiltersOnChange', () => {
const component = mountWithIntl(<OptionsTab {...props} />);
const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] input[type="checkbox"]');
checkbox.simulate('change', { target: { checked: true } });
const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] button');
checkbox.simulate('click');
expect(props.setValue).toHaveBeenCalledTimes(1);
expect(props.setValue).toHaveBeenCalledWith('updateFiltersOnChange', true);
@ -56,8 +56,8 @@ describe('OptionsTab', () => {
it('should update useTimeFilter', () => {
const component = mountWithIntl(<OptionsTab {...props} />);
const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] input[type="checkbox"]');
checkbox.simulate('change', { target: { checked: true } });
const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] button');
checkbox.simulate('click');
expect(props.setValue).toHaveBeenCalledTimes(1);
expect(props.setValue).toHaveBeenCalledWith('useTimeFilter', true);
@ -65,8 +65,8 @@ describe('OptionsTab', () => {
it('should update pinFilters', () => {
const component = mountWithIntl(<OptionsTab {...props} />);
const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] input[type="checkbox"]');
checkbox.simulate('change', { target: { checked: true } });
const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] button');
checkbox.simulate('click');
expect(props.setValue).toHaveBeenCalledTimes(1);
expect(props.setValue).toHaveBeenCalledWith('pinFilters', true);

2
src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
View file

@ -121,7 +121,7 @@ describe('DiscoverFieldSearch', () => {
// @ts-ignore
(aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
});
missingSwitch.simulate('change', { target: { value: false } });
missingSwitch.simulate('click');
expect(onChange).toBeCalledTimes(2);
});

3
src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
View file

@ -29,6 +29,7 @@ import {
EuiPopoverTitle,
EuiSelect,
EuiSwitch,
EuiSwitchEvent,
EuiForm,
EuiFormRow,
EuiButtonGroup,
@ -154,7 +155,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
setActiveFiltersCount(activeFiltersCount + diff);
};
const handleMissingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleMissingChange = (e: EuiSwitchEvent) => {
const missingValue = e.target.checked;
handleValueChange('missing', missingValue);
};

1
src/legacy/core_plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap generated
View file

@ -34,6 +34,7 @@ exports[`TelemetryForm renders as expected when allows to change optIn status 1`
save={[Function]}
setting={
Object {
"ariaName": "Provide usage statistics",
"defVal": false,
"description": <React.Fragment>
<p>

2
src/legacy/core_plugins/telemetry/public/components/telemetry_form.js
View file

@ -33,6 +33,7 @@ import { getConfigTelemetryDesc, PRIVACY_STATEMENT_URL } from '../../common/cons
import { OptInExampleFlyout } from './opt_in_details_component';
import { Field } from 'ui/management';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];
@ -117,6 +118,7 @@ export class TelemetryForm extends Component {
value: telemetryOptInProvider.getOptIn() || false,
description: this.renderDescription(),
defVal: false,
ariaName: i18n.translate('telemetry.provideUsageStatisticsLabel', { defaultMessage: 'Provide usage statistics' })
}}
save={this.toggleOptIn}
clear={this.toggleOptIn}

2
src/legacy/ui/public/vis/editors/default/controls/auto_precision.tsx
View file

@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { AggParamEditorProps } from '..';
function AutoPrecisionParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
function AutoPrecisionParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
const label = i18n.translate('common.ui.aggTypes.changePrecisionLabel', {
defaultMessage: 'Change precision on map zoom',
});

2
src/legacy/ui/public/vis/editors/default/controls/switch.tsx
View file

@ -30,7 +30,7 @@ interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
}
function SwitchParamEditor({
value,
value = false,
setValue,
dataTestSubj,
displayToolTip,

2
src/legacy/ui/public/vis/editors/default/controls/use_geocentroid.tsx
View file

@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { AggParamEditorProps } from '..';
function UseGeocentroidParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
function UseGeocentroidParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
const label = i18n.translate('common.ui.aggTypes.placeMarkersOffGridLabel', {
defaultMessage: 'Place markers off grid (use geocentroid)',
});

2
src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
View file

@ -173,7 +173,7 @@ test('Can set title to an empty string', async () => {
);
const inputField = findTestSubject(component, 'customizePanelHideTitle');
inputField.simulate('change');
inputField.simulate('click');
findTestSubject(component, 'saveNewTitleButton').simulate('click');
expect(inputField.props().value).toBeUndefined();

12
src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx
View file

@ -18,7 +18,7 @@
*/
import React from 'react';
import { EuiFormRow, EuiSwitch } from '@elastic/eui';
import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
import { FieldHook } from '../../hook_form_lib';
import { getFieldValidityAndErrorMessage } from '../helpers';
@ -33,6 +33,14 @@ interface Props {
export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
// Shim for sufficient overlap between EuiSwitchEvent and FieldHook[onChange] event
const onChange = (e: EuiSwitchEvent) => {
const event = ({ ...e, value: `${e.target.checked}` } as unknown) as React.ChangeEvent<{
value: string;
}>;
field.onChange(event);
};
return (
<EuiFormRow
helpText={field.helpText}
@ -45,7 +53,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
<EuiSwitch
label={field.label}
checked={field.value as boolean}
onChange={field.onChange}
onChange={onChange}
data-test-subj="input"
{...euiFieldProps}
/>

3
src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
View file

@ -32,6 +32,7 @@ import {
EuiOverlayMask,
EuiSpacer,
EuiSwitch,
EuiSwitchEvent,
EuiTextArea,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -227,7 +228,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
});
};
private onCopyOnSaveChange = (event: React.ChangeEvent<HTMLInputElement>) => {
private onCopyOnSaveChange = (event: EuiSwitchEvent) => {
this.setState({
copyOnSave: event.target.checked,
});

4
test/functional/apps/visualize/input_control_vis/input_control_options.js
View file

@ -133,13 +133,13 @@ export default function ({ getService, getPageObjects }) {
describe('updateFiltersOnChange is true', () => {
before(async () => {
await PageObjects.visualize.clickVisEditorTab('options');
await PageObjects.visualize.checkCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
await PageObjects.visualize.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
await PageObjects.visualize.clickGo();
});
after(async () => {
await PageObjects.visualize.clickVisEditorTab('options');
await PageObjects.visualize.uncheckCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
await PageObjects.visualize.uncheckSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
await PageObjects.visualize.clickGo();
});

8
test/functional/page_objects/dashboard_page.js
View file

@ -347,7 +347,7 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
async clickSave() {
log.debug('DashboardPage.clickSave');
await testSubjects.clickWhenNotDisabled('confirmSaveSavedObjectButton');
await testSubjects.click('confirmSaveSavedObjectButton');
}
async pressEnterKey() {
@ -543,9 +543,10 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
async setSaveAsNewCheckBox(checked) {
log.debug('saveAsNewCheckbox: ' + checked);
const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('checked') === 'true');
const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('aria-checked') === 'true');
if (isAlreadyChecked !== checked) {
log.debug('Flipping save as new checkbox');
const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
await retry.try(() => saveAsNewCheckbox.click());
}
}
@ -553,9 +554,10 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
async setStoreTimeWithDashboard(checked) {
log.debug('Storing time with dashboard: ' + checked);
const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('checked') === 'true');
const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('aria-checked') === 'true');
if (isAlreadyChecked !== checked) {
log.debug('Flipping store time checkbox');
const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
await retry.try(() => storeTimeCheckbox.click());
}
}

24
test/functional/page_objects/visualize_page.js
View file

@ -372,6 +372,28 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
}
}
async isSwitchChecked(selector) {
const checkbox = await testSubjects.find(selector);
const isChecked = await checkbox.getAttribute('aria-checked');
return isChecked === 'true';
}
async checkSwitch(selector) {
const isChecked = await this.isSwitchChecked(selector);
if (!isChecked) {
log.debug(`checking switch ${selector}`);
await testSubjects.click(selector);
}
}
async uncheckSwitch(selector) {
const isChecked = await this.isSwitchChecked(selector);
if (isChecked) {
log.debug(`unchecking switch ${selector}`);
await testSubjects.click(selector);
}
}
async setSelectByOptionText(selectId, optionText) {
const selectField = await find.byCssSelector(`#${selectId}`);
const options = await find.allByCssSelector(`#${selectId} > option`);
@ -1009,7 +1031,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
async setIsFilteredByCollarCheckbox(value = true) {
await retry.try(async () => {
const isChecked = await this.isChecked('isFilteredByCollarCheckbox');
const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox');
if (isChecked !== value) {
await testSubjects.click('isFilteredByCollarCheckbox');
throw new Error('isFilteredByCollar not set correctly');

8
test/functional/services/saved_query_management_component.ts
View file

@ -118,15 +118,17 @@ export function SavedQueryManagementComponentProvider({ getService }: FtrProvide
await testSubjects.setValue('saveQueryFormDescription', description);
const currentIncludeFiltersValue =
(await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'checked')) ===
(await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'aria-checked')) ===
'true';
if (currentIncludeFiltersValue !== includeFilters) {
await testSubjects.click('saveQueryFormIncludeFiltersOption');
}
const currentIncludeTimeFilterValue =
(await testSubjects.getAttribute('saveQueryFormIncludeTimeFilterOption', 'checked')) ===
'true';
(await testSubjects.getAttribute(
'saveQueryFormIncludeTimeFilterOption',
'aria-checked'
)) === 'true';
if (currentIncludeTimeFilterValue !== includeTimeFilter) {
await testSubjects.click('saveQueryFormIncludeTimeFilterOption');
}

2
test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"react": "^16.8.0",
"react-dom": "^16.8.0"
}

2
test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"react": "^16.8.0"
}
}

2
test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"react": "^16.8.0"
},
"scripts": {

2
test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"react": "^16.8.0"
},
"scripts": {

62
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/simple_template.examples.storyshot generated
View file

@ -13,23 +13,26 @@ exports[`Storyshots arguments/AxisConfig simple 1`] = `
<div
className="euiSwitch euiSwitch--compressed"
>
<input
checked={false}
className="euiSwitch__input"
<button
aria-checked={false}
aria-label=""
className="euiSwitch__button"
id="generated-id"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
onClick={[Function]}
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
/>
</span>
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
/>
</span>
</button>
</div>
</div>
`;
@ -47,23 +50,26 @@ exports[`Storyshots arguments/AxisConfig/components simple template 1`] = `
<div
className="euiSwitch euiSwitch--compressed"
>
<input
checked={false}
className="euiSwitch__input"
<button
aria-checked={false}
aria-label=""
className="euiSwitch__button"
id="generated-id"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
onClick={[Function]}
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
/>
</span>
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
/>
</span>
</button>
</div>
</div>
`;

2
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/simple_template.tsx
View file

@ -19,6 +19,8 @@ export const SimpleTemplate: FunctionComponent<Props> = ({ onValueChange, argVal
compressed
checked={Boolean(argValue)}
onChange={() => onValueChange(!Boolean(argValue))}
showLabel={false}
label=""
/>
);
};

4
x-pack/legacy/plugins/canvas/shareable_runtime/components/__tests__/app.test.tsx
View file

@ -111,7 +111,7 @@ describe('<App />', () => {
wrapper.update();
expect(footer(wrapper).prop('isHidden')).toEqual(false);
expect(footer(wrapper).prop('isAutohide')).toEqual(false);
toolbarCheck(wrapper).simulate('change');
toolbarCheck(wrapper).simulate('click');
expect(footer(wrapper).prop('isAutohide')).toEqual(true);
canvas(wrapper).simulate('mouseEnter');
expect(footer(wrapper).prop('isHidden')).toEqual(false);
@ -132,7 +132,7 @@ describe('<App />', () => {
.simulate('click');
await tick(20);
wrapper.update();
toolbarCheck(wrapper).simulate('change');
toolbarCheck(wrapper).simulate('click');
await tick(20);
// Simulate the mouse leaving the container

213
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot generated
View file

@ -25,49 +25,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
<div
className="euiSwitch"
>
<input
checked={false}
className="euiSwitch__input"
<button
aria-checked={false}
aria-describedby="generated-id"
className="euiSwitch__button"
id="cycle"
name="cycle"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
onClick={[Function]}
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="cycle"
id="generated-id"
onClick={[Function]}
>
Cycle Slides
</label>
</p>
</div>
<hr
className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -190,49 +193,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
<div
className="euiSwitch"
>
<input
checked={true}
className="euiSwitch__input"
<button
aria-checked={true}
aria-describedby="generated-id"
className="euiSwitch__button"
id="cycle"
name="cycle"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
onClick={[Function]}
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="cycle"
id="generated-id"
onClick={[Function]}
>
Cycle Slides
</label>
</p>
</div>
<hr
className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -355,49 +361,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
<div
className="euiSwitch"
>
<input
checked={false}
className="euiSwitch__input"
<button
aria-checked={false}
aria-describedby="generated-id"
className="euiSwitch__button"
id="cycle"
name="cycle"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
onClick={[Function]}
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="cycle"
id="generated-id"
onClick={[Function]}
>
Cycle Slides
</label>
</p>
</div>
<hr
className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"

210
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot generated
View file

@ -31,53 +31,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
<div
className="euiSwitch"
>
<input
<button
aria-checked={false}
aria-describedby="generated-id-help"
checked={false}
className="euiSwitch__input"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
id="generated-id"
name="toolbarHide"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="generated-id"
id="generated-id"
onClick={[Function]}
>
Hide Toolbar
</label>
</p>
</div>
<div
className="euiFormHelpText euiFormRow__text"
@ -122,53 +124,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
<div
className="euiSwitch"
>
<input
<button
aria-checked={true}
aria-describedby="generated-id-help"
checked={true}
className="euiSwitch__input"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
id="generated-id"
name="toolbarHide"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="generated-id"
id="generated-id"
onClick={[Function]}
>
Hide Toolbar
</label>
</p>
</div>
<div
className="euiFormHelpText euiFormRow__text"
@ -213,53 +217,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
<div
className="euiSwitch"
>
<input
<button
aria-checked={false}
aria-describedby="generated-id-help"
checked={false}
className="euiSwitch__input"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
id="generated-id"
name="toolbarHide"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
role="switch"
type="button"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
className="euiSwitch__body"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
className="euiSwitch__label"
htmlFor="generated-id"
id="generated-id"
onClick={[Function]}
>
Hide Toolbar
</label>
</p>
</div>
<div
className="euiFormHelpText euiFormRow__text"

91
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap generated
View file

File diff suppressed because one or more lines are too long

10
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/autoplay_settings.test.tsx
View file

@ -24,15 +24,15 @@ describe('<AutoplaySettings />', () => {
);
test('renders as expected', () => {
expect(checkbox(wrapper).props().checked).toEqual(false);
expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
expect(input(wrapper).props().value).toBe('5s');
});
test('activates and deactivates', () => {
checkbox(wrapper).simulate('change');
expect(checkbox(wrapper).props().checked).toEqual(true);
checkbox(wrapper).simulate('change');
expect(checkbox(wrapper).props().checked).toEqual(false);
checkbox(wrapper).simulate('click');
expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
checkbox(wrapper).simulate('click');
expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
});
test('changes properly with input', () => {

4
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
View file

@ -85,8 +85,8 @@ describe('<Settings />', () => {
// Click the Hide Toolbar switch
portal(wrapper)
.find('input[data-test-subj="hideToolbarSwitch"]')
.simulate('change');
.find('button[data-test-subj="hideToolbarSwitch"]')
.simulate('click');
// Wait for the animation and DOM update
await tick(20);

10
x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/toolbar_settings.test.tsx
View file

@ -20,13 +20,13 @@ describe('<ToolbarSettings />', () => {
);
test('renders as expected', () => {
expect(checkbox(wrapper).props().checked).toEqual(false);
expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
});
test('activates and deactivates', () => {
checkbox(wrapper).simulate('change');
expect(checkbox(wrapper).props().checked).toEqual(true);
checkbox(wrapper).simulate('change');
expect(checkbox(wrapper).props().checked).toEqual(false);
checkbox(wrapper).simulate('click');
expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
checkbox(wrapper).simulate('click');
expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
});
});

4
x-pack/legacy/plugins/canvas/shareable_runtime/test/selectors.ts
View file

@ -21,7 +21,7 @@ export const getToolbarPanel = (wrapper: ReactWrapper) =>
export const getToolbarCheckbox = (wrapper: ReactWrapper) =>
getToolbarPanel(wrapper)
.find('EuiSwitch')
.find('input[type="checkbox"]');
.find('button');
export const getAutoplayPanel = (wrapper: ReactWrapper) =>
wrapper.find('AutoplaySettings > AutoplaySettingsComponent');
@ -29,7 +29,7 @@ export const getAutoplayPanel = (wrapper: ReactWrapper) =>
export const getAutoplayCheckbox = (wrapper: ReactWrapper) =>
getAutoplayPanel(wrapper)
.find('EuiSwitch')
.find('input[type="checkbox"]');
.find('button');
export const getAutoplayTextField = (wrapper: ReactWrapper) =>
getAutoplayPanel(wrapper)

2
x-pack/legacy/plugins/cross_cluster_replication/__jest__/client_integration/helpers/follower_index_add.helpers.js
View file

@ -27,7 +27,7 @@ export const setup = (props) => {
};
const toggleAdvancedSettings = () => {
testBed.form.selectCheckBox('advancedSettingsToggle');
testBed.form.toggleEuiSwitch('advancedSettingsToggle');
};
return {

2
x-pack/legacy/plugins/cross_cluster_replication/__jest__/client_integration/helpers/follower_index_edit.helpers.js
View file

@ -34,7 +34,7 @@ export const setup = (props) => {
};
const toggleAdvancedSettings = () => {
testBed.form.selectCheckBox('advancedSettingsToggle');
testBed.form.toggleEuiSwitch('advancedSettingsToggle');
};
return {

14
x-pack/legacy/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js
View file

@ -66,7 +66,7 @@ window.TextEncoder = null;
let component;
const activatePhase = (rendered, phase) => {
const testSubject = `enablePhaseSwitch-${phase}`;
findTestSubject(rendered, testSubject).simulate('change', { target: { checked: true } });
findTestSubject(rendered, testSubject).simulate('click');
rendered.update();
};
const expectedErrorMessages = (rendered, expectedErrorMessages) => {
@ -83,7 +83,7 @@ const expectedErrorMessages = (rendered, expectedErrorMessages) => {
});
};
const noRollover = (rendered) => {
findTestSubject(rendered, 'rolloverSwitch').simulate('change', { target: { checked: false } });
findTestSubject(rendered, 'rolloverSwitch').simulate('click');
rendered.update();
};
const getNodeAttributeSelect = (rendered, phase) => {
@ -155,7 +155,7 @@ describe('edit policy', () => {
</Provider>
);
const rendered = mountWithIntl(component);
findTestSubject(rendered, 'saveAsNewSwitch').simulate('change', { target: { checked: true } });
findTestSubject(rendered, 'saveAsNewSwitch').simulate('click');
rendered.update();
setPolicyName(rendered, 'testy0');
save(rendered);
@ -275,7 +275,7 @@ describe('edit policy', () => {
noRollover(rendered);
setPolicyName(rendered, 'mypolicy');
activatePhase(rendered, 'warm');
findTestSubject(rendered, 'shrinkSwitch').simulate('change', { target: { checked: true } });
findTestSubject(rendered, 'shrinkSwitch').simulate('click');
rendered.update();
setPhaseAfter(rendered, 'warm', 1);
const shrinkInput = rendered.find('input#warm-selectedPrimaryShardCount');
@ -290,7 +290,7 @@ describe('edit policy', () => {
setPolicyName(rendered, 'mypolicy');
activatePhase(rendered, 'warm');
setPhaseAfter(rendered, 'warm', 1);
findTestSubject(rendered, 'shrinkSwitch').simulate('change', { target: { checked: true } });
findTestSubject(rendered, 'shrinkSwitch').simulate('click');
rendered.update();
const shrinkInput = rendered.find('input#warm-selectedPrimaryShardCount');
shrinkInput.simulate('change', { target: { value: '-1' } });
@ -304,7 +304,7 @@ describe('edit policy', () => {
setPolicyName(rendered, 'mypolicy');
activatePhase(rendered, 'warm');
setPhaseAfter(rendered, 'warm', 1);
findTestSubject(rendered, 'forceMergeSwitch').simulate('change', { target: { checked: true } });
findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
rendered.update();
const shrinkInput = rendered.find('input#warm-selectedForceMergeSegments');
shrinkInput.simulate('change', { target: { value: '0' } });
@ -318,7 +318,7 @@ describe('edit policy', () => {
setPolicyName(rendered, 'mypolicy');
activatePhase(rendered, 'warm');
setPhaseAfter(rendered, 'warm', 1);
findTestSubject(rendered, 'forceMergeSwitch').simulate('change', { target: { checked: true } });
findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
rendered.update();
const shrinkInput = rendered.find('input#warm-selectedForceMergeSegments');
shrinkInput.simulate('change', { target: { value: '-1' } });

4
x-pack/legacy/plugins/index_management/__jest__/components/index_table.test.js
View file

@ -182,8 +182,8 @@ describe('index table', () => {
)
.map(span => span.text())
);
const switchControl = rendered.find('.euiSwitch__input');
switchControl.simulate('change', { target: { checked: true } });
const switchControl = rendered.find('.euiSwitch__button');
switchControl.simulate('click');
snapshot(
rendered
.find(

5
x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
View file

@ -16,6 +16,7 @@ import {
EuiPopoverTitle,
EuiSpacer,
EuiSwitch,
EuiSwitchEvent,
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -48,8 +49,8 @@ export const LegendControls = ({ autoBounds, boundsOverride, onChange, dataBound
/>
);
const handleAutoChange = (e: SyntheticEvent<HTMLInputElement>) => {
setDraftAuto(e.currentTarget.checked);
const handleAutoChange = (e: EuiSwitchEvent) => {
setDraftAuto(e.target.checked);
};
const createBoundsHandler = (name: string) => (e: SyntheticEvent<HTMLInputElement>) => {

4
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.test.tsx
View file

@ -8,7 +8,7 @@ import React from 'react';
import { DateHistogramIndexPatternColumn } from './date_histogram';
import { dateHistogramOperation } from '.';
import { shallow } from 'enzyme';
import { EuiSwitch } from '@elastic/eui';
import { EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
import {
UiSettingsClientContract,
SavedObjectsClientContract,
@ -423,7 +423,7 @@ describe('date_histogram', () => {
);
instance.find(EuiSwitch).prop('onChange')!({
target: { checked: true },
} as React.ChangeEvent<HTMLInputElement>);
} as EuiSwitchEvent);
expect(setStateSpy).toHaveBeenCalled();
const newState = setStateSpy.mock.calls[0][0];
expect(newState).toHaveProperty('layers.third.columns.col1.params.interval', '30d');

3
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
View file

@ -15,6 +15,7 @@ import {
EuiForm,
EuiFormRow,
EuiSwitch,
EuiSwitchEvent,
EuiFieldNumber,
EuiSelect,
EuiFlexItem,
@ -154,7 +155,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
restrictedInterval(field!.aggregationRestrictions)
);
function onChangeAutoInterval(ev: React.ChangeEvent<HTMLInputElement>) {
function onChangeAutoInterval(ev: EuiSwitchEvent) {
const value = ev.target.checked ? autoIntervalFromDateRange(dateRange) : autoInterval;
setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'interval', value }));
}

2
x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
View file

@ -56,6 +56,6 @@ describe('Data Frame Analytics: <CreateAnalyticsForm />', () => {
expect(options.at(2).props().value).toBe('regression');
const row2 = euiFormRows.at(1);
expect(row2.find('label').text()).toBe('Enable advanced editor');
expect(row2.find('p').text()).toBe('Enable advanced editor');
});
});

8
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/dedicated_index/dedicated_index_switch.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC, useState, useContext, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiSwitch } from '@elastic/eui';
import { JobCreatorContext } from '../../../../../job_creator_context';
import { Description } from './description';
@ -29,6 +30,13 @@ export const DedicatedIndexSwitch: FC = () => {
checked={useDedicatedIndex}
onChange={toggleModelPlot}
data-test-subj="mlJobWizardSwitchUseDedicatedIndex"
showLabel={false}
label={i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.useDedicatedIndex.title',
{
defaultMessage: 'Use dedicated index',
}
)}
/>
</Description>
);

8
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_plot/model_plot_switch.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC, useState, useContext, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiSwitch } from '@elastic/eui';
import { JobCreatorContext } from '../../../../../job_creator_context';
import { Description } from './description';
@ -29,6 +30,13 @@ export const ModelPlotSwitch: FC = () => {
checked={modelPlotEnabled}
onChange={toggleModelPlot}
data-test-subj="mlJobWizardSwitchModelPlot"
showLabel={false}
label={i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlot.title',
{
defaultMessage: 'Enable model plot',
}
)}
/>
</Description>
);

5
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/sparse_data/sparse_data_switch.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC, useState, useContext, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiSwitch } from '@elastic/eui';
import { JobCreatorContext } from '../../../job_creator_context';
import { Description } from './description';
@ -43,6 +44,10 @@ export const SparseDataSwitch: FC = () => {
checked={sparseData}
onChange={toggleSparseData}
data-test-subj="mlJobWizardSwitchSparseData"
showLabel={false}
label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.sparseData.title', {
defaultMessage: 'Sparse data',
})}
/>
</Description>
);

4
x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/job_settings_form.tsx
View file

@ -247,6 +247,10 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
useDedicatedIndex: checked,
});
}}
showLabel={false}
label={i18n.translate('xpack.ml.newJob.recognize.useDedicatedIndexLabel', {
defaultMessage: 'Use dedicated index',
})}
/>
</EuiFormRow>
</EuiDescribedFormGroup>

4
x-pack/legacy/plugins/remote_clusters/__jest__/client_integration/remote_clusters_add.test.js
View file

@ -42,11 +42,11 @@ describe('Create Remote cluster', () => {
expect(exists('remoteClusterFormSkipUnavailableFormToggle')).toBe(true);
// By default it should be set to "false"
expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(false);
expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(false);
form.toggleEuiSwitch('remoteClusterFormSkipUnavailableFormToggle');
expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(true);
expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(true);
});
test('should display errors and disable the save button when clicking "save" without filling the form', () => {

2
x-pack/legacy/plugins/remote_clusters/__jest__/client_integration/remote_clusters_edit.test.js
View file

@ -64,7 +64,7 @@ describe('Edit Remote cluster', () => {
test('should populate the form fields with the values from the remote cluster loaded', () => {
expect(find('remoteClusterFormNameInput').props().value).toBe(REMOTE_CLUSTER_EDIT_NAME);
expect(find('remoteClusterFormSeedsInput').text()).toBe(REMOTE_CLUSTER_EDIT.seeds.join(''));
expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(REMOTE_CLUSTER_EDIT.skipUnavailable);
expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(REMOTE_CLUSTER_EDIT.skipUnavailable);
});
test('should disable the form name input', () => {

124
x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap generated
View file

@ -247,45 +247,49 @@ Array [
<div
class="euiSwitch"
>
<input
class="euiSwitch__input"
<button
aria-checked="false"
aria-describedby="mockId"
class="euiSwitch__button"
data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
id="mockId"
type="checkbox"
/>
<span
class="euiSwitch__body"
role="switch"
type="button"
>
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
class="euiSwitch__body"
>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
class="euiSwitch__label"
for="mockId"
id="mockId"
>
Skip if unavailable
</label>
</p>
</div>
</div>
</div>
@ -502,45 +506,49 @@ Array [
<div
class="euiSwitch"
>
<input
class="euiSwitch__input"
<button
aria-checked="false"
aria-describedby="mockId"
class="euiSwitch__button"
data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
id="mockId"
type="checkbox"
/>
<span
class="euiSwitch__body"
role="switch"
type="button"
>
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
class="euiSwitch__body"
>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<svg
class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</span>
<label
</button>
<p
class="euiSwitch__label"
for="mockId"
id="mockId"
>
Skip if unavailable
</label>
</p>
</div>
</div>
</div>,

2
x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap generated
View file

@ -11,7 +11,9 @@ exports[`JobSwitch renders correctly against snapshot 1`] = `
checked={false}
data-test-subj="job-switch"
disabled={false}
label=""
onChange={[Function]}
showLabel={false}
/>
</EuiFlexItem>
</EuiFlexGroup>

4
x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.test.tsx
View file

@ -42,9 +42,9 @@ describe('JobSwitch', () => {
);
wrapper
.find('[data-test-subj="job-switch"] input')
.find('button[data-test-subj="job-switch"]')
.first()
.simulate('change', {
.simulate('click', {
target: { checked: true },
});

2
x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx
View file

@ -59,6 +59,8 @@ export const JobSwitch = React.memo<JobSwitchProps>(
setIsLoading(true);
onJobStateChange(job, job.latestTimestampMs || 0, e.target.checked);
}}
showLabel={false}
label=""
/>
)}
</EuiFlexItem>

4
x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.test.tsx
View file

@ -59,9 +59,9 @@ describe('JobsTable', () => {
<JobsTable isLoading={false} jobs={siemJobs} onJobStateChange={onJobStateChangeMock} />
);
wrapper
.find('[data-test-subj="job-switch"] input')
.find('button[data-test-subj="job-switch"]')
.first()
.simulate('change', {
.simulate('click', {
target: { checked: true },
});
expect(onJobStateChangeMock.mock.calls[0]).toEqual([siemJobs[0], 1571022859393, true]);

4
x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx
View file

@ -31,9 +31,9 @@ describe('NetworkTopNFlow Select direction', () => {
const wrapper = mount(<IsPtrIncluded isPtrIncluded={false} onChange={mockOnChange} />);
wrapper
.find('input')
.find('button')
.first()
.simulate('change', event);
.simulate('click', event);
wrapper.update();

8
x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/index.tsx
View file

@ -213,13 +213,7 @@ const AllRules = React.memo(() => {
field: 'activate',
name: 'Activate',
render: (value: ColumnTypes['activate']) => (
// Michael: Uncomment props below when EUI 14.9.0 is added to Kibana.
<EuiSwitch
checked={value}
// label="Activate"
onChange={() => {}}
// showLabel={false}
/>
<EuiSwitch checked={value} label="Activate" onChange={() => {}} showLabel={false} />
),
sortable: true,
width: '65px',

5
x-pack/legacy/plugins/spaces/public/views/management/edit_space/enabled_features/feature_table.tsx
View file

@ -102,9 +102,8 @@ export class FeatureTable extends Component<Props, {}> {
id={record.feature.id}
checked={checked}
onChange={this.onChange(record.feature.id) as any}
aria-label={
checked ? `${record.feature.name} visible` : `${record.feature.name} disabled`
}
label={`${record.feature.name} visible`}
showLabel={false}
/>
);
},

4
x-pack/legacy/plugins/spaces/public/views/management/edit_space/manage_space_page.test.tsx
View file

@ -233,8 +233,8 @@ function toggleFeature(wrapper: ReactWrapper<any, any>) {
wrapper
.find(EuiSwitch)
.find('input')
.simulate('change', { target: { checked: false } });
.find('button')
.simulate('click');
wrapper.update();
}

2
x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/overview/deprecation_logging_toggle.tsx
View file

@ -47,7 +47,7 @@ export class DeprecationLoggingToggleUI extends React.Component<
id="xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch"
data-test-subj="upgradeAssistantDeprecationToggle"
label={this.renderLoggingState()}
checked={loggingEnabled}
checked={loggingEnabled || false}
onChange={this.toggleLogging}
disabled={loadingState === LoadingState.Loading || loadingState === LoadingState.Error}
/>

2
x-pack/package.json
View file

@ -184,7 +184,7 @@
"@elastic/ctags-langserver": "^0.1.11",
"@elastic/datemath": "5.0.2",
"@elastic/ems-client": "1.0.5",
"@elastic/eui": "14.8.0",
"@elastic/eui": "14.9.0",
"@elastic/filesaver": "1.1.2",
"@elastic/javascript-typescript-langserver": "^0.3.3",
"@elastic/lsp-extension": "^0.1.2",

9
x-pack/test/functional/page_objects/gis_page.js
View file

@ -310,14 +310,13 @@ export function GisPageProvider({ getService, getPageObjects }) {
}
async disableApplyGlobalQuery() {
const element = await testSubjects.find('mapLayerPanelApplyGlobalQueryCheckbox');
const isSelected = await element.isSelected();
if(isSelected) {
const isSelected = await testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
if(isSelected === 'true') {
await retry.try(async () => {
log.debug(`disabling applyGlobalQuery`);
await testSubjects.click('mapLayerPanelApplyGlobalQueryCheckbox');
const isStillSelected = await element.isSelected();
if (isStillSelected) {
const isStillSelected = await testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
if (isStillSelected === 'true') {
throw new Error('applyGlobalQuery not disabled');
}
});

2
x-pack/test/functional/page_objects/upgrade_assistant.js
View file

@ -45,7 +45,7 @@ export function UpgradeAssistantProvider({ getService, getPageObjects }) {
async expectDeprecationLoggingLabel(labelText) {
return await retry.try(async () => {
log.debug('expectDeprecationLoggingLabel()');
const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ label');
const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ p');
const value = await label.getVisibleText();
expect(value).to.equal(labelText);
});

6
x-pack/test/functional/services/machine_learning/job_wizard_common.ts
View file

@ -181,11 +181,12 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
sectionOptions: SectionOptions = { withAdvancedSection: true }
): Promise<boolean> {
let subj = 'mlJobWizardSwitchModelPlot';
const isSelected = await testSubjects.getAttribute(subj, 'aria-checked');
if (sectionOptions.withAdvancedSection === true) {
await this.ensureAdvancedSectionOpen();
subj = advancedSectionSelector(subj);
}
return await testSubjects.isSelected(subj);
return isSelected === 'true';
},
async assertModelPlotSwitchCheckedState(
@ -213,11 +214,12 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
sectionOptions: SectionOptions = { withAdvancedSection: true }
): Promise<boolean> {
let subj = 'mlJobWizardSwitchUseDedicatedIndex';
const isSelected = await testSubjects.getAttribute(subj, 'aria-checked');
if (sectionOptions.withAdvancedSection === true) {
await this.ensureAdvancedSectionOpen();
subj = advancedSectionSelector(subj);
}
return await testSubjects.isSelected(subj);
return isSelected === 'true';
},
async assertDedicatedIndexSwitchCheckedState(

8
x-pack/test_utils/testbed/testbed.ts
View file

@ -174,7 +174,13 @@ export const registerTestBed = <T extends string = string>(
checkBox.simulate('change', { target: { checked: isChecked } });
};
const toggleEuiSwitch: TestBed<T>['form']['toggleEuiSwitch'] = selectCheckBox; // Same API as "selectCheckBox"
const toggleEuiSwitch: TestBed<T>['form']['toggleEuiSwitch'] = testSubject => {
const checkBox = find(testSubject);
if (!checkBox.length) {
throw new Error(`"${testSubject}" was not found.`);
}
checkBox.simulate('click');
};
const setComboBoxValue: TestBed<T>['form']['setComboBoxValue'] = (
comboBoxTestSubject,

8
yarn.lock
View file

@ -1151,10 +1151,10 @@
tabbable "^1.1.0"
uuid "^3.1.0"
"@elastic/eui@14.8.0":
version "14.8.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.8.0.tgz#777d29852998e52e8fc6dfb1869a4b32d74c72bb"
integrity sha512-p6TZv6Z+ENzw6JnCyXVQtvEOo7eEct8Qb/S4aS4EXK1WIyGB35Ra/a/pb3bLQbbZ2mSZtCr1sk+XVUq0qDpytw==
"@elastic/eui@14.9.0":
version "14.9.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.9.0.tgz#934ab8d51c56671635dc17ac20ec325f43ceda75"
integrity sha512-0ZztvfRO3SNgHtS8a+4i6CSG3Yc+C0Kodzc7obY5wkOzissrnbwLZdU79hU/H6DHYCt/zYDdGcrDp6BeD67RtQ==
dependencies:
"@types/lodash" "^4.14.116"
"@types/numeral" "^0.0.25"