[Management] Index pattern creation wizard in React!

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateIndexPatternWizard should render step 1 1`] = `
+<div>
+  <Header
+    isIncludingSystemIndices={false}
+    onChangeIncludingSystemIndices={[Function]}
+  />
+  <StepIndexPattern
+    allIndices={
+      Array [
+        Object {
+          "name": "kibana",
+        },
+      ]
+    }
+    esService={Object {}}
+    goToNextStep={[Function]}
+    initialQuery=""
+    isIncludingSystemIndices={false}
+    savedObjectsClient={Object {}}
+  />
+</div>
+`;
+
+exports[`CreateIndexPatternWizard should render step 2 1`] = `
+<div>
+  <Header
+    isIncludingSystemIndices={false}
+    onChangeIncludingSystemIndices={[Function]}
+  />
+  <StepTimeField
+    createIndexPattern={[Function]}
+    goToPreviousStep={[Function]}
+    indexPattern=""
+    indexPatternsService={Object {}}
+  />
+</div>
+`;
+
+exports[`CreateIndexPatternWizard should render the empty state 1`] = `
+<div>
+  <Header
+    isIncludingSystemIndices={false}
+    onChangeIncludingSystemIndices={[Function]}
+  />
+  <EmptyState
+    loadingDataDocUrl=""
+  />
+  <StepIndexPattern
+    allIndices={Array []}
+    esService={Object {}}
+    goToNextStep={[Function]}
+    initialQuery=""
+    isIncludingSystemIndices={false}
+    savedObjectsClient={Object {}}
+  />
+</div>
+`;
+
+exports[`CreateIndexPatternWizard should render the loading state 1`] = `
+<div>
+  <Header
+    isIncludingSystemIndices={false}
+    onChangeIncludingSystemIndices={[Function]}
+  />
+  <LoadingState />
+</div>
+`;

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { CreateIndexPatternWizard } from '../create_index_pattern_wizard';
+
+jest.mock('../components/step_index_pattern', () => ({ StepIndexPattern: 'StepIndexPattern' }));
+jest.mock('../components/step_time_field', () => ({ StepTimeField: 'StepTimeField' }));
+jest.mock('../components/header', () => ({ Header: 'Header' }));
+jest.mock('../components/loading_state', () => ({ LoadingState: 'LoadingState' }));
+jest.mock('../components/empty_state', () => ({ EmptyState: 'EmptyState' }));
+jest.mock('../lib/get_indices', () => ({
+  getIndices: () => {
+    return [
+      { name: 'kibana' },
+    ];
+  },
+}));
+
+const loadingDataDocUrl = '';
+const initialQuery = '';
+const services = {
+  es: {},
+  indexPatterns: {},
+  savedObjectsClient: {},
+  config: {},
+  kbnUrl: {},
+  notify: {},
+};
+
+describe('CreateIndexPatternWizard', () => {
+  it('should render step 1', async () => {
+    const component = shallow(
+      <CreateIndexPatternWizard
+        loadingDataDocUrl={loadingDataDocUrl}
+        initialQuery={initialQuery}
+        services={services}
+      />
+    );
+
+    // Allow the componentWillMount code to execute
+    // https://github.com/airbnb/enzyme/issues/450
+    await component.update(); // Fire `componentWillMount()`
+    await component.update(); // Force update the component post async actions
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render step 2', async () => {
+    const component = shallow(
+      <CreateIndexPatternWizard
+        loadingDataDocUrl={loadingDataDocUrl}
+        initialQuery={initialQuery}
+        services={services}
+      />
+    );
+
+    // Allow the componentWillMount code to execute
+    // https://github.com/airbnb/enzyme/issues/450
+    await component.update(); // Fire `componentWillMount()`
+    await component.update(); // Force update the component post async actions
+
+    component.setState({ step: 2 });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the loading state', async () => {
+    const component = shallow(
+      <CreateIndexPatternWizard
+        loadingDataDocUrl={loadingDataDocUrl}
+        initialQuery={initialQuery}
+        services={services}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the empty state', async () => {
+    const component = shallow(
+      <CreateIndexPatternWizard
+        loadingDataDocUrl={loadingDataDocUrl}
+        initialQuery={initialQuery}
+        services={services}
+      />
+    );
+
+    // Allow the componentWillMount code to execute
+    // https://github.com/airbnb/enzyme/issues/450
+    await component.update(); // Fire `componentWillMount()`
+    await component.update(); // Force update the component post async actions
+
+    // Remove all indices
+    component.setState({ allIndices: [] });
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js → src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js

@@ -3,30 +3,34 @@ const unmountComponentAtNode = jest.fn();
 
 jest.doMock('react-dom', () => ({ render, unmountComponentAtNode }));
 
-const { renderStepIndexPattern, destroyStepIndexPattern } = require('../index');
+const { renderCreateIndexPatternWizard, destroyCreateIndexPatternWizard } = require('../render');
 
-describe('StepIndexPatternRender', () => {
+describe('CreateIndexPatternWizardRender', () => {
   beforeEach(() => {
     jest.spyOn(document, 'getElementById').mockImplementation(() => ({}));
     render.mockClear();
     unmountComponentAtNode.mockClear();
   });
 
   it('should call render', () => {
-    renderStepIndexPattern(
-      [],
+    renderCreateIndexPatternWizard(
       '',
-      false,
-      {},
-      {},
-      () => {}
+      '',
+      {
+        es: {},
+        indexPatterns: {},
+        savedObjectsClient: {},
+        config: {},
+        kbnUrl: {},
+        notify: {},
+      }
     );
 
     expect(render.mock.calls.length).toBe(1);
   });
 
   it('should call unmountComponentAtNode', () => {
-    destroyStepIndexPattern();
+    destroyCreateIndexPatternWizard();
     expect(unmountComponentAtNode.mock.calls.length).toBe(1);
   });
 });

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/angular_template.html

@@ -0,0 +1,5 @@
+<kbn-management-app section="kibana">
+  <kbn-management-indices>
+    <div id="createIndexPatternReact"></div>
+  </kbn-management-indices>
+</kbn-management-app>

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/__snapshots__/empty_state.test.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyState should render normally 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <EuiFlexGroup
+    alignItems="center"
+    component="div"
+    gutterSize="l"
+    justifyContent="center"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle>
+        <EuiTextColor
+          color="subdued"
+        >
+          <h2
+            style={
+              Object {
+                "textAlign": "center",
+              }
+            }
+          >
+            Couldn't find any Elasticsearch data
+          </h2>
+        </EuiTextColor>
+      </EuiTitle>
+      <EuiSpacer
+        size="s"
+      />
+      <EuiText>
+        <p>
+          <EuiTextColor
+            color="subdued"
+          >
+            You'll need to index some data into Elasticsearch before you can create an index pattern.
+          </EuiTextColor>
+
+          <EuiLink
+            color="primary"
+            href="http://www.elastic.co"
+            target="_blank"
+            type="button"
+          >
+            Learn how.
+          </EuiLink>
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xs"
+      />
+      <EuiFlexGroup
+        alignItems="center"
+        component="div"
+        gutterSize="l"
+        justifyContent="center"
+        responsive={true}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiButton
+            color="primary"
+            fill={false}
+            iconSide="left"
+            iconType="faceHappy"
+            type="button"
+          >
+            Check for new data
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiPanel>
+`;

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/empty_state.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { EmptyState } from '../empty_state';
+import { shallow } from 'enzyme';
+
+describe('EmptyState', () => {
+  it('should render normally', () => {
+    const component = shallow(
+      <EmptyState
+        loadingDataDocUrl="http://www.elastic.co"
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/empty_state.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiText,
+  EuiTextColor,
+  EuiSpacer,
+  EuiLink,
+  EuiButton,
+} from '@elastic/eui';
+
+export const EmptyState = ({
+  loadingDataDocUrl,
+}) => (
+  <EuiPanel paddingSize="l">
+    <EuiFlexGroup justifyContent="center" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiTitle>
+          <EuiTextColor color="subdued">
+            <h2 style={{ textAlign: 'center' }}>Couldn&apos;t find any Elasticsearch data</h2>
+          </EuiTextColor>
+        </EuiTitle>
+        <EuiSpacer size="s"/>
+        <EuiText>
+          <p>
+            <EuiTextColor color="subdued">
+              You&apos;ll need to index some data into Elasticsearch before you can create an index pattern.
+            </EuiTextColor>
+            &nbsp;
+            <EuiLink
+              href={loadingDataDocUrl}
+              target="_blank"
+            >
+              Learn how.
+            </EuiLink>
+          </p>
+        </EuiText>
+        <EuiSpacer size="xs"/>
+        <EuiFlexGroup justifyContent="center" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButton iconType="faceHappy">
+              Check for new data
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
+);

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/index.js

@@ -0,0 +1 @@
+export { EmptyState } from './empty_state';