Update configure data source per UX input (opensearch-project#2235)

Signed-off-by: Kristen Tian <[email protected]> Signed-off-by: Kristen Tian <[email protected]>
kristenTian · Sep 14, 2022 · 3eec6a3 · 3eec6a3
1 parent e27333e
commit 3eec6a3
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 20 deletions.
diff --git a/...nts/create_index_pattern_wizard/components/step_data_source/components/header/header.scss b/...nts/create_index_pattern_wizard/components/step_data_source/components/header/header.scss
@@ -0,0 +1,3 @@
+.dataSourceRadioHelperText {
+  text-indent: 24px;
+}
diff --git a/...ents/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx b/...ents/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<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 (
@@ -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}
@@ -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"