[MD][IP]Make step info in index pattern creation dynamic

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

@@ -15,18 +15,21 @@ import {
 } from 'src/plugins/index_pattern_management/public/types';
 import { SavedObjectFinderUi } from '../../../../../../../../../plugins/saved_objects/public';
 import { useOpenSearchDashboards } from '../../../../../../../../../plugins/opensearch_dashboards_react/public';
+import { StepInfo } from '../../../../types';
 
 interface HeaderProps {
   onSearchSelected: (id: string, type: string) => void;
   dataSourceRef: DataSourceRef;
   goToNextStep: (dataSourceRef: DataSourceRef) => void;
   isNextStepDisabled: boolean;
+  stepInfo: StepInfo;
 }
 
 const DATA_SOURCE_PAGE_SIZE = 5;
 
 export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
-  const { dataSourceRef, onSearchSelected, goToNextStep, isNextStepDisabled } = props;
+  const { dataSourceRef, onSearchSelected, goToNextStep, isNextStepDisabled, stepInfo } = props;
+  const { currentStepNumber, totalStepNumber } = stepInfo;
 
   const { savedObjects, uiSettings } = useOpenSearchDashboards<
     IndexPatternManagmentContext
@@ -38,7 +41,8 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         <h2>
           <FormattedMessage
             id="indexPatternManagement.createIndexPattern.stepDataSourceHeader"
-            defaultMessage="Step 0 of 2: Configure data source" // todo: make dynamic: Next PR
+            defaultMessage="Step {currentStepNumber} of {totalStepNumber}: Configure data source"
+            values={{ currentStepNumber, totalStepNumber }}
           />
         </h2>
       </EuiTitle>

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

@@ -6,15 +6,17 @@
 import { EuiPageContent } from '@elastic/eui';
 import React, { useState } from 'react';
 import { DataSourceRef } from 'src/plugins/index_pattern_management/public/types';
+import { StepInfo } from '../../types';
 
 import { Header } from './components/header';
 
 interface StepDataSourceProps {
   goToNextStep: (dataSourceRef: DataSourceRef) => void;
+  stepInfo: StepInfo;
 }
 
 export const StepDataSource = (props: StepDataSourceProps) => {
-  const { goToNextStep } = props;
+  const { goToNextStep, stepInfo } = props;
 
   const [selectedDataSource, setSelectedDataSource] = useState<DataSourceRef>();
   const [isNextStepDisabled, setIsNextStepDisabled] = useState(true);
@@ -34,6 +36,7 @@ export const StepDataSource = (props: StepDataSourceProps) => {
           dataSourceRef={selectedDataSource!}
           goToNextStep={() => goToNextStep(selectedDataSource!)}
           isNextStepDisabled={isNextStepDisabled}
+          stepInfo={stepInfo}
         />
       </EuiPageContent>
     );

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

@@ -45,6 +45,7 @@ describe('Header', () => {
         isNextStepDisabled={false}
         onChangeIncludingSystemIndices={() => {}}
         isIncludingSystemIndices={false}
+        stepInfo={{ totalStepNumber: 0, currentStepNumber: 0 }}
       />
     );
 
@@ -63,6 +64,7 @@ describe('Header', () => {
         isNextStepDisabled={true}
         onChangeIncludingSystemIndices={() => {}}
         isIncludingSystemIndices={false}
+        stepInfo={{ totalStepNumber: 0, currentStepNumber: 0 }}
       />
     );
 

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

@@ -45,6 +45,7 @@ import {
 
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { StepInfo } from '../../../../types';
 
 interface HeaderProps {
   isInputInvalid: boolean;
@@ -57,6 +58,7 @@ interface HeaderProps {
   showSystemIndices?: boolean;
   onChangeIncludingSystemIndices: (event: EuiSwitchEvent) => void;
   isIncludingSystemIndices: boolean;
+  stepInfo: StepInfo;
 }
 
 export const Header: React.FC<HeaderProps> = ({
@@ -70,14 +72,19 @@ export const Header: React.FC<HeaderProps> = ({
   showSystemIndices = false,
   onChangeIncludingSystemIndices,
   isIncludingSystemIndices,
+  stepInfo,
   ...rest
 }) => (
   <div {...rest}>
     <EuiTitle size="s">
       <h2>
         <FormattedMessage
           id="indexPatternManagement.createIndexPattern.stepHeader"
-          defaultMessage="Step 1 of 2: Define an index pattern"
+          defaultMessage="Step {currentStepNumber} of {totalStepNumber}: Define an index pattern"
+          values={{
+            currentStepNumber: stepInfo.currentStepNumber,
+            totalStepNumber: stepInfo.totalStepNumber,
+          }}
         />
       </h2>
     </EuiTitle>

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

@@ -53,7 +53,7 @@ import { IndicesList } from './components/indices_list';
 import { Header } from './components/header';
 import { context as contextType } from '../../../../../../opensearch_dashboards_react/public';
 import { IndexPatternCreationConfig } from '../../../../../../../plugins/index_pattern_management/public';
-import { MatchedItem } from '../../types';
+import { MatchedItem, StepInfo } from '../../types';
 import { DataSourceRef, IndexPatternManagmentContextValue } from '../../../../types';
 
 interface StepIndexPatternProps {
@@ -64,6 +64,7 @@ interface StepIndexPatternProps {
   initialQuery?: string;
   showSystemIndices: boolean;
   dataSourceRef?: DataSourceRef;
+  stepInfo: StepInfo;
 }
 
 interface StepIndexPatternState {
@@ -351,7 +352,7 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
   }
 
   renderHeader({ exactMatchedIndices: indices }: { exactMatchedIndices: MatchedItem[] }) {
-    const { goToNextStep, indexPatternCreationType } = this.props;
+    const { goToNextStep, indexPatternCreationType, stepInfo } = this.props;
     const {
       query,
       showingIndexPatternQueryErrors,
@@ -404,6 +405,7 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
         onChangeIncludingSystemIndices={this.onChangeIncludingSystemIndices}
         isIncludingSystemIndices={isIncludingSystemIndices}
         showSystemIndices={this.props.showSystemIndices}
+        stepInfo={stepInfo}
       />
     );
   }

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

@@ -34,7 +34,13 @@ import { shallow } from 'enzyme';
 
 describe('Header', () => {
   it('should render normally', () => {
-    const component = shallow(<Header indexPattern="ki*" indexPatternName="ki*" />);
+    const component = shallow(
+      <Header
+        indexPattern="ki*"
+        indexPatternName="ki*"
+        stepInfo={{ totalStepNumber: 0, currentStepNumber: 0 }}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });

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

@@ -33,19 +33,25 @@ import React from 'react';
 import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@osd/i18n/react';
+import { StepInfo } from '../../../../types';
 
 interface HeaderProps {
   indexPattern: string;
   indexPatternName: string;
+  stepInfo: StepInfo;
 }
 
-export const Header: React.FC<HeaderProps> = ({ indexPattern, indexPatternName }) => (
+export const Header: React.FC<HeaderProps> = ({ indexPattern, indexPatternName, stepInfo }) => (
   <div>
     <EuiTitle size="s">
       <h2>
         <FormattedMessage
           id="indexPatternManagement.createIndexPattern.stepTimeHeader"
-          defaultMessage="Step 2 of 2: Configure settings"
+          defaultMessage="Step {currentStepNumber} of {totalStepNumber}: Configure settings"
+          values={{
+            currentStepNumber: stepInfo.currentStepNumber,
+            totalStepNumber: stepInfo.totalStepNumber,
+          }}
         />
       </h2>
     </EuiTitle>

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

@@ -48,6 +48,7 @@ import { ActionButtons } from './components/action_buttons';
 import { context } from '../../../../../../opensearch_dashboards_react/public';
 import { DataSourceRef, IndexPatternManagmentContextValue } from '../../../../types';
 import { IndexPatternCreationConfig } from '../../../..';
+import { StepInfo } from '../../types';
 
 interface StepTimeFieldProps {
   indexPattern: string;
@@ -56,6 +57,7 @@ interface StepTimeFieldProps {
   indexPatternCreationType: IndexPatternCreationConfig;
   selectedTimeField?: string;
   dataSourceRef?: DataSourceRef;
+  stepInfo: StepInfo;
 }
 
 interface StepTimeFieldState {
@@ -220,7 +222,7 @@ export class StepTimeField extends Component<StepTimeFieldProps, StepTimeFieldSt
       );
     }
 
-    const { indexPattern, goToPreviousStep } = this.props;
+    const { indexPattern, goToPreviousStep, stepInfo } = this.props;
 
     const timeFieldOptions =
       timeFields.length > 0
@@ -256,7 +258,11 @@ export class StepTimeField extends Component<StepTimeFieldProps, StepTimeFieldSt
 
     return (
       <>
-        <Header indexPattern={indexPattern} indexPatternName={indexPatternName} />
+        <Header
+          indexPattern={indexPattern}
+          indexPatternName={indexPatternName}
+          stepInfo={stepInfo}
+        />
         <EuiSpacer size="m" />
         <TimeField
           isVisible={showTimeField}