More tests and PR feedback

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

@@ -0,0 +1,31 @@
+const render = jest.fn();
+const unmountComponentAtNode = jest.fn();
+
+jest.doMock('react-dom', () => ({ render, unmountComponentAtNode }));
+
+const { renderStepIndexPattern, destroyStepIndexPattern } = require('../index');
+
+describe('StepIndexPatternRender', () => {
+  beforeEach(() => {
+    render.mockClear();
+    unmountComponentAtNode.mockClear();
+  });
+
+  it('should call render', () => {
+    renderStepIndexPattern(
+      'reactDiv',
+      [],
+      '',
+      false,
+      {},
+      () => {}
+    );
+
+    expect(render.mock.calls.length).toBe(1);
+  });
+
+  it('should call unmountComponentAtNode', () => {
+    destroyStepIndexPattern('reactDiv');
+    expect(unmountComponentAtNode.mock.calls.length).toBe(1);
+  });
+});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { StepIndexPattern } from './step_index_pattern';
 
 export function renderStepIndexPattern(
@@ -21,3 +21,7 @@ export function renderStepIndexPattern(
     document.getElementById(domElementId),
   );
 }
+
+export function destroyStepIndexPattern(domElementId) {
+  unmountComponentAtNode(document.getElementById(domElementId));
+}

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

@@ -83,16 +83,13 @@ export class StepIndexPattern extends Component {
     );
   }
 
-  renderStatusMessage() {
-    const { allIndices, isIncludingSystemIndices } = this.props;
-    const { query, isLoadingIndices, partialMatchedIndices } = this.state;
+  renderStatusMessage(matchedIndices) {
+    const { query, isLoadingIndices } = this.state;
 
     if (isLoadingIndices) {
       return null;
     }
 
-    const matchedIndices = getMatchedIndices(allIndices, partialMatchedIndices, query, isIncludingSystemIndices);
-
     return (
       <StatusMessage
         matchedIndices={matchedIndices}
@@ -101,23 +98,16 @@ export class StepIndexPattern extends Component {
     );
   }
 
-  renderList() {
-    const { isIncludingSystemIndices, allIndices } = this.props;
-    const {
-      query,
-      partialMatchedIndices,
-      isLoadingIndices,
-    } = this.state;
+  renderList({ visibleIndices, allIndices }) {
+    const { query, isLoadingIndices } = this.state;
 
     if (isLoadingIndices) {
       return null;
     }
 
-    const indices = getMatchedIndices(allIndices, partialMatchedIndices, query, isIncludingSystemIndices);
-
     const indicesToList = query.length
-      ? indices.visibleIndices
-      : indices.allIndices;
+      ? visibleIndices
+      : allIndices;
 
     return (
       <IndicesList
@@ -126,17 +116,9 @@ export class StepIndexPattern extends Component {
     );
   }
 
-  renderHeader() {
-    const { isIncludingSystemIndices, allIndices, goToNextStep } = this.props;
-    const {
-      query,
-      showingIndexPatternQueryErrors,
-      partialMatchedIndices,
-    } = this.state;
-
-    const {
-      exactMatchedIndices: indices
-    } = getMatchedIndices(allIndices, partialMatchedIndices, query, isIncludingSystemIndices);
+  renderHeader({ exactMatchedIndices: indices }) {
+    const { goToNextStep } = this.props;
+    const { query, showingIndexPatternQueryErrors } = this.state;
 
     let containsErrors = false;
     const errors = [];
@@ -164,14 +146,19 @@ export class StepIndexPattern extends Component {
   }
 
   render() {
+    const { isIncludingSystemIndices, allIndices } = this.props;
+    const { query, partialMatchedIndices } = this.state;
+
+    const matchedIndices = getMatchedIndices(allIndices, partialMatchedIndices, query, isIncludingSystemIndices);
+
     return (
       <EuiPanel paddingSize="l">
-        {this.renderHeader()}
+        {this.renderHeader(matchedIndices)}
         <EuiSpacer size="s"/>
-        {this.renderLoadingState()}
-        {this.renderStatusMessage()}
+        {this.renderLoadingState(matchedIndices)}
+        {this.renderStatusMessage(matchedIndices)}
         <EuiSpacer size="s"/>
-        {this.renderList()}
+        {this.renderList(matchedIndices)}
       </EuiPanel>
     );
   }

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

@@ -7,7 +7,7 @@ import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
 import template from './create_index_pattern_wizard.html';
 import { sendCreateIndexPatternRequest } from './send_create_index_pattern_request';
-import { renderStepIndexPattern } from './components/step_index_pattern';
+import { renderStepIndexPattern, destroyStepIndexPattern } from './components/step_index_pattern';
 import './step_time_field';
 import './matching_indices_list';
 import './create_index_pattern_wizard.less';
@@ -45,6 +45,12 @@ uiModules.get('apps/management')
       display: `I don't want to use the Time Filter`,
     };
 
+    const REACT_DOM_ELEMENT_ID = 'stepIndexPatternReact';
+
+    $scope.$on('$destroy', () => {
+      destroyStepIndexPattern(REACT_DOM_ELEMENT_ID);
+    });
+
     // Configure the new index pattern we're going to create.
     this.formValues = {
       id: $routeParams.id ? decodeURIComponent($routeParams.id) : undefined,
@@ -185,12 +191,13 @@ uiModules.get('apps/management')
 
     this.renderStepIndexPatternReact = () => {
       $scope.$$postDigest(() => renderStepIndexPattern(
-        'stepIndexPatternReact',
+        REACT_DOM_ELEMENT_ID,
         allIndices,
         this.formValues.name,
         this.doesIncludeSystemIndices,
         es,
         query => {
+          destroyStepIndexPattern(REACT_DOM_ELEMENT_ID);
           this.formValues.name = query;
           this.goToTimeFieldStep();
           $scope.$apply();