diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.scss b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.scss new file mode 100644 index 000000000000..048ae2981c05 --- /dev/null +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.scss @@ -0,0 +1,3 @@ +.dataSourceRadioHelperText { + text-indent: 24px; +} diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx index e4dfbbae86d7..b66aeceecb51 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx @@ -4,6 +4,7 @@ */ import React, { useState } from 'react'; +import './header.scss'; import { EuiTitle, @@ -12,8 +13,7 @@ import { EuiFlexItem, EuiButton, EuiFlexGroup, - EuiSwitch, - EuiSwitchEvent, + EuiRadio, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; @@ -40,14 +40,21 @@ export const Header: React.FC = (props: HeaderProps) => { const { dataSourceRef, onSearchSelected, goToNextStep, isNextStepDisabled, stepInfo } = props; const { currentStepNumber, totalStepNumber } = stepInfo; - const [skipped, setSkipped] = useState(false); + const [defaultChecked, setDefaultChecked] = useState(true); + const [dataSourceChecked, setDataSourceChecked] = useState(false); const { savedObjects, uiSettings } = useOpenSearchDashboards< IndexPatternManagmentContext >().services; - const onSkipped = (e: EuiSwitchEvent) => { - setSkipped(e.target.checked); + const onChangeDefaultChecked = (e) => { + setDefaultChecked(e.target.checked); + setDataSourceChecked(!e.target.checked); + }; + + const onChangeDataSourceChecked = (e) => { + setDataSourceChecked(e.target.checked); + setDefaultChecked(!e.target.checked); }; return ( @@ -61,27 +68,55 @@ export const Header: React.FC = (props: HeaderProps) => { /> - - - } - checked={skipped} - onChange={onSkipped} - /> - - - {!skipped && ( + + + + + } + checked={defaultChecked} + onChange={(e) => onChangeDefaultChecked(e)} + compressed + /> + + + + + + } + checked={dataSourceChecked} + onChange={(e) => onChangeDataSourceChecked(e)} + compressed + /> + + + + {dataSourceChecked && ( + = (props: HeaderProps) => { iconSide="right" iconType="arrowRight" onClick={() => goToNextStep(dataSourceRef)} - isDisabled={isNextStepDisabled && !skipped} + isDisabled={isNextStepDisabled && !defaultChecked} >