Skip to content

Commit

Permalink
Update configure data source per UX input (#2235)
Browse files Browse the repository at this point in the history
Signed-off-by: Kristen Tian <tyarong@amazon.com>

Signed-off-by: Kristen Tian <tyarong@amazon.com>
  • Loading branch information
kristenTian authored Aug 31, 2022
1 parent c9a9a9b commit 0db1cb6
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 20 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.dataSourceRadioHelperText {
text-indent: 24px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import React, { useState } from 'react';
import './header.scss';

import {
EuiTitle,
Expand All @@ -12,8 +13,7 @@ import {
EuiFlexItem,
EuiButton,
EuiFlexGroup,
EuiSwitch,
EuiSwitchEvent,
EuiRadio,
} from '@elastic/eui';

import { FormattedMessage } from '@osd/i18n/react';
Expand All @@ -40,14 +40,21 @@ export const Header: React.FC<HeaderProps> = (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 (
Expand All @@ -61,27 +68,55 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
/>
</h2>
</EuiTitle>
<EuiFlexGroup justifyContent="flexEnd">
<EuiSwitch
label={
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSource.skipLabel"
defaultMessage="skip"
/>
}
checked={skipped}
onChange={onSkipped}
/>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiText>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSourceLabel"
defaultMessage="Please pick the data source -- within which to configure index patterns."
/>
</EuiText>
{!skipped && (

<EuiSpacer size="m" />

<EuiRadio
id={'useDefault'}
label={
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSource.useDefaultLabel"
defaultMessage="Use default"
/>
}
checked={defaultChecked}
onChange={(e) => onChangeDefaultChecked(e)}
compressed
/>
<EuiText size="s" className="dataSourceRadioHelperText">
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSource.useDefault.helperText"
defaultMessage="Uses the default data source configured by the OpenSearch dashboards administrator."
/>
</EuiText>
<EuiSpacer size="l" />
<EuiRadio
id={'useDataSource'}
label={
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSource.useDataSourceLabel"
defaultMessage="Choose data source"
/>
}
checked={dataSourceChecked}
onChange={(e) => onChangeDataSourceChecked(e)}
compressed
/>
<EuiText size="s" className="dataSourceRadioHelperText">
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSource.useDataSource.helperText"
defaultMessage="Connect to an existing external data source."
/>
</EuiText>
{dataSourceChecked && (
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
<SavedObjectFinderUi
key="searchSavedObjectFinder"
onChoose={onSearchSelected}
Expand Down Expand Up @@ -118,7 +153,7 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
iconSide="right"
iconType="arrowRight"
onClick={() => goToNextStep(dataSourceRef)}
isDisabled={isNextStepDisabled && !skipped}
isDisabled={isNextStepDisabled && !defaultChecked}
>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.step.nextStepButton"
Expand Down

0 comments on commit 0db1cb6

Please sign in to comment.