Add data source step into IndexPattern with Mock switch (#2064) (#2086)

Signed-off-by: Kristen Tian <tyarong@amazon.com>

src/plugins/index_pattern_management/opensearch_dashboards.json

@@ -4,5 +4,5 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["management", "data", "urlForwarding"],
-  "requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils"]
+  "requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils", "savedObjects"]
 }

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { EuiTitle, EuiSpacer, EuiText, EuiFlexItem, EuiFormRow, EuiButton } from '@elastic/eui';
+
+import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import {
+  DataSourceRef,
+  IndexPatternManagmentContext,
+} from 'src/plugins/index_pattern_management/public/types';
+import { SavedObjectFinderUi } from '../../../../../../../../../plugins/saved_objects/public';
+import { useOpenSearchDashboards } from '../../../../../../../../../plugins/opensearch_dashboards_react/public';
+
+interface HeaderProps {
+  onSearchSelected: (id: string, type: string) => void;
+  dataSourceRef: DataSourceRef;
+  goToNextStep: (dataSourceRef: DataSourceRef) => void;
+  isNextStepDisabled: boolean;
+}
+
+const DATA_SOURCE_PAGE_SIZE = 5;
+
+export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
+  const { dataSourceRef, onSearchSelected, goToNextStep, isNextStepDisabled } = props;
+
+  const { savedObjects, uiSettings } = useOpenSearchDashboards<
+    IndexPatternManagmentContext
+  >().services;
+
+  return (
+    <div>
+      <EuiTitle size="s">
+        <h2>
+          <FormattedMessage
+            id="indexPatternManagement.createIndexPattern.stepDataSourceHeader"
+            defaultMessage="Step 0 of 2: Configure data source" // todo: make dynamic: Next PR
+          />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiText>
+        <FormattedMessage
+          id="indexPatternManagement.createIndexPattern.stepDataSourceLabel"
+          defaultMessage="Please pick the data source -- within which to configure index patterns."
+        />
+      </EuiText>
+      <EuiFlexItem grow={false}>
+        <SavedObjectFinderUi
+          key="searchSavedObjectFinder"
+          onChoose={onSearchSelected}
+          showFilter={false}
+          noItemsMessage={i18n.translate(
+            'indexPatternManagement.createIndexPattern.searchSelection.notFoundLabel',
+            {
+              defaultMessage: 'No data sources have been configured yet.',
+            }
+          )}
+          savedObjectMetaData={[
+            {
+              type: 'data-source',
+              getIconForSavedObject: () => 'apps', // todo: #2034
+              name: i18n.translate(
+                'indexPatternManagement.createIndexPattern.searchSelection.savedObjectType.dataSource',
+                {
+                  defaultMessage: 'Data Source',
+                }
+              ),
+            },
+          ]}
+          fixedPageSize={DATA_SOURCE_PAGE_SIZE}
+          uiSettings={uiSettings}
+          savedObjects={savedObjects}
+        />
+        <EuiFormRow hasEmptyLabelSpace>
+          <EuiButton
+            fill
+            iconSide="right"
+            iconType="arrowRight"
+            onClick={() => goToNextStep(dataSourceRef)}
+            isDisabled={isNextStepDisabled}
+          >
+            <FormattedMessage
+              id="indexPatternManagement.createIndexPattern.step.nextStepButton"
+              defaultMessage="Next step"
+            />
+          </EuiButton>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </div>
+  );
+};

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Header } from './header';

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { StepDataSource } from './step_data_source';

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/step_data_source.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiPageContent } from '@elastic/eui';
+import React, { useState } from 'react';
+import { DataSourceRef } from 'src/plugins/index_pattern_management/public/types';
+
+import { Header } from './components/header';
+
+interface StepDataSourceProps {
+  goToNextStep: (dataSourceRef: DataSourceRef) => void;
+}
+
+export const StepDataSource = (props: StepDataSourceProps) => {
+  const { goToNextStep } = props;
+
+  const [selectedDataSource, setSelectedDataSource] = useState<DataSourceRef>();
+  const [isNextStepDisabled, setIsNextStepDisabled] = useState(true);
+
+  const onSearchSelected = (id: string, selectedType: string) => {
+    const selected = { id, type: selectedType };
+
+    setSelectedDataSource(selected);
+    setIsNextStepDisabled(false);
+  };
+
+  const renderContent = () => {
+    return (
+      <EuiPageContent>
+        <Header
+          onSearchSelected={onSearchSelected}
+          dataSourceRef={selectedDataSource!}
+          goToNextStep={() => goToNextStep(selectedDataSource!)}
+          isNextStepDisabled={isNextStepDisabled}
+        />
+      </EuiPageContent>
+    );
+  };
+
+  return <>{renderContent()}</>;
+};

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx

@@ -29,7 +29,14 @@
  */
 
 import React, { Component } from 'react';
-import { EuiSpacer, EuiCallOut, EuiSwitchEvent } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiCallOut,
+  EuiSwitchEvent,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import { indexPatterns, IndexPatternAttributes, UI_SETTINGS } from '../../../../../../data/public';
@@ -52,6 +59,7 @@ import { IndexPatternManagmentContextValue } from '../../../../types';
 interface StepIndexPatternProps {
   allIndices: MatchedItem[];
   indexPatternCreationType: IndexPatternCreationConfig;
+  goToPreviousStep: () => void;
   goToNextStep: (query: string, timestampField?: string) => void;
   initialQuery?: string;
   showSystemIndices: boolean;
@@ -116,13 +124,16 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
 
   ILLEGAL_CHARACTERS = [...indexPatterns.ILLEGAL_CHARACTERS];
 
+  dataSrouceEnabled: boolean;
+
   constructor(props: StepIndexPatternProps, context: IndexPatternManagmentContextValue) {
     super(props, context);
     const { indexPatternCreationType, initialQuery } = this.props;
 
     this.state.query =
       initialQuery || context.services.uiSettings.get(UI_SETTINGS.INDEXPATTERN_PLACEHOLDER);
     this.state.indexPatternName = indexPatternCreationType.getIndexPatternName();
+    this.dataSrouceEnabled = context.services.dataSourceEnabled;
   }
 
   lastQuery = '';
@@ -232,6 +243,23 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
     );
   }
 
+  renderGoToPrevious() {
+    const { goToPreviousStep } = this.props;
+
+    return (
+      <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType="arrowLeft" onClick={goToPreviousStep}>
+            <FormattedMessage
+              id="indexPatternManagement.createIndexPattern.stepIndexPattern.backButton"
+              defaultMessage="Back"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   renderStatusMessage(matchedIndices: {
     allIndices: MatchedItem[];
     exactMatchedIndices: MatchedItem[];
@@ -383,6 +411,7 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
         {this.renderStatusMessage(matchedIndices)}
         <EuiSpacer />
         {this.renderList(matchedIndices)}
+        {this.dataSrouceEnabled && this.renderGoToPrevious()}
       </>
     );
   }

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.test.tsx

@@ -33,6 +33,7 @@ import { IndexPattern } from '../../../../../plugins/data/public';
 import { mockManagementPlugin } from '../../mocks';
 import { IndexPatternCreationConfig } from '../../';
 import { createComponentWithContext } from '../test_utils';
+import { TIME_FIELD_STEP } from './lib';
 
 jest.mock('./components/step_index_pattern', () => ({ StepIndexPattern: 'StepIndexPattern' }));
 jest.mock('./components/step_time_field', () => ({ StepTimeField: 'StepTimeField' }));
@@ -136,7 +137,7 @@ describe('CreateIndexPatternWizard', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('renders time field step when step is set to 2', async () => {
+  test('renders time field step when step is set to TIME_FIELD_STEP', async () => {
     const component = createComponentWithContext(
       CreateIndexPatternWizard,
       { ...routeComponentPropsMock },
@@ -146,7 +147,7 @@ describe('CreateIndexPatternWizard', () => {
     component.setState({
       isInitiallyLoadingIndices: false,
       allIndices: [{ name: 'myIndexPattern' }],
-      step: 2,
+      step: TIME_FIELD_STEP,
     });
 
     await component.update();