From d41cf716a28fbae53a1c3a1c48c54df0bcc3039d Mon Sep 17 00:00:00 2001 From: Kristen Tian <105667444+kristenTian@users.noreply.github.com> Date: Thu, 18 Aug 2022 12:30:28 -0700 Subject: [PATCH] Make step info in index pattern creation dynamic (#2164) Signed-off-by: Kristen Tian Signed-off-by: Kristen Tian --- .../create_index_pattern_wizard.test.tsx.snap | 30 +++++++++++++ .../components/header/header.tsx | 8 +++- .../step_data_source/step_data_source.tsx | 5 ++- .../header/__snapshots__/header.test.tsx.snap | 18 ++++++-- .../components/header/header.test.tsx | 2 + .../components/header/header.tsx | 9 +++- .../step_index_pattern/step_index_pattern.tsx | 6 ++- .../header/__snapshots__/header.test.tsx.snap | 9 +++- .../components/header/header.test.tsx | 8 +++- .../components/header/header.tsx | 10 ++++- .../step_time_field/step_time_field.tsx | 10 ++++- .../create_index_pattern_wizard.tsx | 13 +++++- .../lib/creation_flow.test.ts | 44 +++++++++++++++++++ .../lib/creation_flow.ts | 37 ++++++++-------- .../create_index_pattern_wizard/types.ts | 5 +++ 15 files changed, 177 insertions(+), 37 deletions(-) create mode 100644 src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.test.ts diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap index 28a4ec0e90a2..1546eda9b552 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap @@ -52,6 +52,12 @@ exports[`CreateIndexPatternWizard renders index pattern step when there are indi } } showSystemIndices={true} + stepInfo={ + Object { + "currentStepNumber": 1, + "totalStepNumber": 2, + } + } /> void; dataSourceRef: DataSourceRef; goToNextStep: (dataSourceRef: DataSourceRef) => void; isNextStepDisabled: boolean; + stepInfo: StepInfo; } const DATA_SOURCE_PAGE_SIZE = 5; export const Header: React.FC = (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 = (props: HeaderProps) => {

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/step_data_source.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/step_data_source.tsx index eccea5be875f..ea16e93ae539 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/step_data_source.tsx +++ b/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(); const [isNextStepDisabled, setIsNextStepDisabled] = useState(true); @@ -34,6 +36,7 @@ export const StepDataSource = (props: StepDataSourceProps) => { dataSourceRef={selectedDataSource!} goToNextStep={() => goToNextStep(selectedDataSource!)} isNextStepDisabled={isNextStepDisabled} + stepInfo={stepInfo} /> ); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/__snapshots__/header.test.tsx.snap index 851e5cc4c2a7..35804208c243 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/__snapshots__/header.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/__snapshots__/header.test.tsx.snap @@ -7,9 +7,14 @@ exports[`Header should mark the input as invalid 1`] = ` >

@@ -119,9 +124,14 @@ exports[`Header should render normally 1`] = ` >

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.test.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.test.tsx index e4b9b62eeca3..8a8446cc5610 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.test.tsx +++ b/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 }} /> ); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.tsx index d2876765f662..b4e1803a8d21 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header/header.tsx +++ b/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 = ({ @@ -70,6 +72,7 @@ export const Header: React.FC = ({ showSystemIndices = false, onChangeIncludingSystemIndices, isIncludingSystemIndices, + stepInfo, ...rest }) => (
@@ -77,7 +80,11 @@ export const Header: React.FC = ({

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx index c9449213f603..cf6d9f1398f4 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx +++ b/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 ); } diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/__snapshots__/header.test.tsx.snap index 9efda4fdac7f..5dd6d1ad7e75 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/__snapshots__/header.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/__snapshots__/header.test.tsx.snap @@ -7,9 +7,14 @@ exports[`Header should render normally 1`] = ` >

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.test.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.test.tsx index e7701dd1f892..8ddd8c0ee217 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.test.tsx +++ b/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(
); + const component = shallow( +
+ ); expect(component).toMatchSnapshot(); }); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.tsx index 823afbf9a780..595d9e2e87bd 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/header/header.tsx +++ b/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 = ({ indexPattern, indexPatternName }) => ( +export const Header: React.FC = ({ indexPattern, indexPatternName, stepInfo }) => (

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/step_time_field.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/step_time_field.tsx index 019a3d98b710..2ef8806191a2 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/step_time_field.tsx +++ b/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 0 @@ -256,7 +258,11 @@ export class StepTimeField extends Component -
+
; } @@ -283,7 +292,7 @@ export class CreateIndexPatternWizard extends Component< {header} - + ); } @@ -307,6 +316,7 @@ export class CreateIndexPatternWizard extends Component< this.state.step === INDEX_PATTERN_STEP } dataSourceRef={dataSourceRef} + stepInfo={stepInfo} /> ); @@ -324,6 +334,7 @@ export class CreateIndexPatternWizard extends Component< indexPatternCreationType={this.state.indexPatternCreationType} selectedTimeField={this.state.selectedTimeField} dataSourceRef={dataSourceRef} + stepInfo={stepInfo} /> ); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.test.ts b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.test.ts new file mode 100644 index 000000000000..639357cb9964 --- /dev/null +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.test.ts @@ -0,0 +1,44 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + DATA_SOURCE_STEP, + getInitialStepName, + getNextStep, + getPrevStep, + getTotalStepNumber, + INDEX_PATTERN_STEP, + TIME_FIELD_STEP, +} from './creation_flow'; + +describe('getInitialStepName', () => { + it('should get correct first step base on different flow', () => { + expect(getInitialStepName(false)).toEqual(INDEX_PATTERN_STEP); + expect(getInitialStepName(true)).toEqual(DATA_SOURCE_STEP); + }); +}); + +describe('getTotalStepNumber', () => { + it('should get correct total number base on different flow', () => { + expect(getTotalStepNumber(false)).toEqual(2); + expect(getTotalStepNumber(true)).toEqual(3); + }); +}); + +describe('getNextStep', () => { + it('should get correct next step base on different flow', () => { + expect(getNextStep(INDEX_PATTERN_STEP, false)).toEqual(TIME_FIELD_STEP); + expect(getNextStep(INDEX_PATTERN_STEP, true)).toEqual(TIME_FIELD_STEP); + expect(getNextStep(DATA_SOURCE_STEP, true)).toEqual(INDEX_PATTERN_STEP); + }); +}); + +describe('getPrevStep', () => { + it('should get correct previous step base on different flow', () => { + expect(getPrevStep(TIME_FIELD_STEP, false)).toEqual(INDEX_PATTERN_STEP); + expect(getPrevStep(INDEX_PATTERN_STEP, true)).toEqual(DATA_SOURCE_STEP); + expect(getPrevStep(INDEX_PATTERN_STEP, false)).toEqual(null); + }); +}); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.ts b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.ts index c8fe6bcb2ee4..86a1deaf6454 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.ts +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/lib/creation_flow.ts @@ -38,43 +38,42 @@ DEFAULT_CREATION_FLOW_MAP.set(TIME_FIELD_STEP, { export type StepType = 'INDEX_PATTERN_STEP' | 'TIME_FIELD_STEP' | 'DATA_SOURCE_STEP'; -export const getInitialStepName = (supportsDataSource: boolean) => { - if (supportsDataSource) { +export const getInitialStepName = (dataSourceEnabled: boolean) => { + if (dataSourceEnabled) { return DATA_SOURCE_STEP; } return INDEX_PATTERN_STEP; }; -export const getNextStep = ( - currentStep: StepType, - supportsDataSource: boolean -): StepType | null => { - if (supportsDataSource) { +export const getNextStep = (currentStep: StepType, dataSourceEnabled: boolean): StepType | null => { + if (dataSourceEnabled) { return CREATION_FLOW_WITH_DATA_SOURCE_MAP.get(currentStep).next; } return DEFAULT_CREATION_FLOW_MAP.get(currentStep).next; }; -export const getPrevStep = ( - currentStep: StepType, - supportsDataSource: boolean -): StepType | null => { - if (supportsDataSource) { +export const getPrevStep = (currentStep: StepType, dataSourceEnabled: boolean): StepType | null => { + if (dataSourceEnabled) { return CREATION_FLOW_WITH_DATA_SOURCE_MAP.get(currentStep).prev; } - return CREATION_FLOW_WITH_DATA_SOURCE_MAP.get(currentStep).prev; + return DEFAULT_CREATION_FLOW_MAP.get(currentStep).prev; }; -export const getCurrentStepNumber = ( - currentStep: StepType, - supportsDataSource: boolean -): number => { - if (supportsDataSource) { +export const getCurrentStepNumber = (currentStep: StepType, dataSourceEnabled: boolean): number => { + if (dataSourceEnabled) { return CREATION_FLOW_WITH_DATA_SOURCE_MAP.get(currentStep).stepNumber; } - return CREATION_FLOW_WITH_DATA_SOURCE_MAP.get(currentStep).stepNumber; + return DEFAULT_CREATION_FLOW_MAP.get(currentStep).stepNumber; +}; + +export const getTotalStepNumber = (dataSourceEnabled: boolean): number => { + if (dataSourceEnabled) { + return CREATION_FLOW_WITH_DATA_SOURCE_MAP.size; + } + + return DEFAULT_CREATION_FLOW_MAP.size; }; diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/types.ts b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/types.ts index b427a0e6fa60..9705bbc4b3ee 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/types.ts +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/types.ts @@ -79,3 +79,8 @@ export interface Tag { key: string; color: string; } + +export interface StepInfo { + totalStepNumber: number; + currentStepNumber: number; +}