Add data source step into IndexPattern with Mock switch (opensearch-p…

…roject#2064)

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: add dynamic stuff other than 0/2
+          />
+        </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
+              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,44 @@
+/*
+ * 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);
+
+  // todo: consistent name
+  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.tsx

@@ -47,14 +47,25 @@ import { LoadingState } from './components/loading_state';
 
 import { context as contextType } from '../../../../opensearch_dashboards_react/public';
 import { getCreateBreadcrumbs } from '../breadcrumbs';
-import { ensureMinimumTime, getIndices } from './lib';
+import {
+  DATA_SOURCE_STEP,
+  ensureMinimumTime,
+  getIndices,
+  getInitialStepName,
+  getNextStep,
+  getPrevStep,
+  INDEX_PATTERN_STEP,
+  StepType,
+  TIME_FIELD_STEP,
+} from './lib';
 import { IndexPatternCreationConfig } from '../..';
-import { IndexPatternManagmentContextValue } from '../../types';
+import { DataSourceRef, IndexPatternManagmentContextValue } from '../../types';
 import { MatchedItem } from './types';
 import { DuplicateIndexPatternError, IndexPattern } from '../../../../data/public';
+import { StepDataSource } from './components/step_data_source';
 
 interface CreateIndexPatternWizardState {
-  step: number;
+  step: StepType;
   indexPattern: string;
   allIndices: MatchedItem[];
   remoteClustersExist: boolean;
@@ -63,6 +74,7 @@ interface CreateIndexPatternWizardState {
   indexPatternCreationType: IndexPatternCreationConfig;
   selectedTimeField?: string;
   docLinks: DocLinksStart;
+  dataSourceRef?: DataSourceRef;
 }
 
 export class CreateIndexPatternWizard extends Component<
@@ -73,15 +85,21 @@ export class CreateIndexPatternWizard extends Component<
 
   public readonly context!: IndexPatternManagmentContextValue;
 
+  dataSourceEnabled: boolean;
+
   constructor(props: RouteComponentProps, context: IndexPatternManagmentContextValue) {
     super(props, context);
 
     context.services.setBreadcrumbs(getCreateBreadcrumbs());
 
     const type = new URLSearchParams(props.location.search).get('type') || undefined;
 
+    this.dataSourceEnabled = context.services.dataSourceEnabled; // todo
+
+    // this.stepsMap = this.initilizeStepsMap(dataSourceEnabled);
+
     this.state = {
-      step: 1,
+      step: getInitialStepName(this.dataSourceEnabled),
       indexPattern: '',
       allIndices: [],
       remoteClustersExist: false,
@@ -209,12 +227,26 @@ export class CreateIndexPatternWizard extends Component<
     history.push(`/patterns/${emptyPattern.id}`);
   };
 
-  goToTimeFieldStep = (indexPattern: string, selectedTimeField?: string) => {
-    this.setState({ step: 2, indexPattern, selectedTimeField });
+  goToNextFromIndexPattern = (indexPattern: string, selectedTimeField?: string) => {
+    this.setState({ indexPattern, selectedTimeField });
+    this.goToNextStep();
+  };
+
+  goToNextFromDataSource = (dataSourceRef: DataSourceRef) => {
+    this.setState({ dataSourceRef });
+    this.goToNextStep();
+  };
+
+  goToNextStep = () => {
+    this.setState((prevState) => ({
+      step: getNextStep(prevState.step, this.dataSourceEnabled)!,
+    }));
   };
 
-  goToIndexPatternStep = () => {
-    this.setState({ step: 1 });
+  goToPreviousStep = () => {
+    this.setState((prevState) => ({
+      step: getPrevStep(prevState.step, this.dataSourceEnabled)!,
+    }));
   };
 
   renderHeader() {
@@ -238,35 +270,47 @@ export class CreateIndexPatternWizard extends Component<
 
     const header = this.renderHeader();
 
-    if (step === 1) {
+    if (step === DATA_SOURCE_STEP) {
+      return (
+        <EuiPageContent>
+          {header}
+          <EuiHorizontalRule />
+          <StepDataSource goToNextStep={this.goToNextFromDataSource} />
+        </EuiPageContent>
+      );
+    }
+
+    if (step === INDEX_PATTERN_STEP) {
       const { location } = this.props;
       const initialQuery = new URLSearchParams(location.search).get('id') || undefined;
 
       return (
         <EuiPageContent>
           {header}
           <EuiHorizontalRule />
-          <StepIndexPattern
+          <StepIndexPattern // todo:add go to previous step
             allIndices={allIndices}
             initialQuery={indexPattern || initialQuery}
             indexPatternCreationType={this.state.indexPatternCreationType}
-            goToNextStep={this.goToTimeFieldStep}
+            goToPreviousStep={this.goToPreviousStep}
+            goToNextStep={this.goToNextFromIndexPattern}
             showSystemIndices={
-              this.state.indexPatternCreationType.getShowSystemIndices() && this.state.step === 1
+              this.state.indexPatternCreationType.getShowSystemIndices() &&
+              this.state.step === INDEX_PATTERN_STEP
             }
           />
         </EuiPageContent>
       );
     }
 
-    if (step === 2) {
+    if (step === TIME_FIELD_STEP) {
       return (
         <EuiPageContent>
           {header}
           <EuiHorizontalRule />
           <StepTimeField
             indexPattern={indexPattern}
-            goToPreviousStep={this.goToIndexPatternStep}
+            goToPreviousStep={this.goToPreviousStep}
             createIndexPattern={this.createIndexPattern}
             indexPatternCreationType={this.state.indexPatternCreationType}
             selectedTimeField={this.state.selectedTimeField}