Index pattern management - typescript components (#56987)

* Index pattern management - typescript components
elastic · Feb 18, 2020 · 911981d · 911981d
1 parent f6dc674
commit 911981d
Show file tree

Hide file tree

Showing 64 changed files with 509 additions and 312 deletions.
diff --git a/.../create_index_pattern_wizard.test.js.snap → .../create_index_pattern_wizard.test.js.snap b/.../create_index_pattern_wizard.test.js.snap → .../create_index_pattern_wizard.test.js.snap
diff --git a/...__/__snapshots__/empty_state.test.js.snap → ...e/__snapshots__/empty_state.test.tsx.snap b/...__/__snapshots__/empty_state.test.js.snap → ...e/__snapshots__/empty_state.test.tsx.snap
diff --git a/.../empty_state/__jest__/empty_state.test.js → ...mponents/empty_state/empty_state.test.tsx b/.../empty_state/__jest__/empty_state.test.js → ...mponents/empty_state/empty_state.test.tsx
@@ -24,9 +24,7 @@ import sinon from 'sinon';
 
 describe('EmptyState', () => {
   it('should render normally', () => {
-    const component = shallow(
-      <EmptyState loadingDataDocUrl="http://www.elastic.co" onRefresh={() => {}} />
-    );
+    const component = shallow(<EmptyState onRefresh={() => {}} />);
 
     expect(component).toMatchSnapshot();
   });
@@ -36,9 +34,7 @@ describe('EmptyState', () => {
       it('is called when refresh button is clicked', () => {
         const onRefreshHandler = sinon.stub();
 
-        const component = shallow(
-          <EmptyState loadingDataDocUrl="http://www.elastic.co" onRefresh={onRefreshHandler} />
-        );
+        const component = shallow(<EmptyState onRefresh={onRefreshHandler} />);
 
         component.find('[data-test-subj="refreshIndicesButton"]').simulate('click');
 

diff --git a/...ard/components/empty_state/empty_state.js → ...rd/components/empty_state/empty_state.tsx b/...ard/components/empty_state/empty_state.js → ...rd/components/empty_state/empty_state.tsx
@@ -18,13 +18,12 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { EuiCallOut, EuiTextColor, EuiLink, EuiButton } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export const EmptyState = ({ onRefresh }) => (
+export const EmptyState = ({ onRefresh }: { onRefresh: () => void }) => (
   <div>
     <EuiCallOut
       color="warning"
@@ -82,7 +81,3 @@ export const EmptyState = ({ onRefresh }) => (
     </EuiCallOut>
   </div>
 );
-
-EmptyState.propTypes = {
-  onRefresh: PropTypes.func.isRequired,
-};
diff --git a/...rn_wizard/components/empty_state/index.js → ...rn_wizard/components/empty_state/index.ts b/...rn_wizard/components/empty_state/index.js → ...rn_wizard/components/empty_state/index.ts
diff --git a/..._jest__/__snapshots__/header.test.js.snap → ...header/__snapshots__/header.test.tsx.snap b/..._jest__/__snapshots__/header.test.js.snap → ...header/__snapshots__/header.test.tsx.snap
diff --git a/...components/header/__jest__/header.test.js → ..._wizard/components/header/header.test.tsx b/...components/header/__jest__/header.test.js → ..._wizard/components/header/header.test.tsx
@@ -22,17 +22,26 @@ import { Header } from '../header';
 import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
 
 describe('Header', () => {
+  const indexPatternName = 'test index pattern';
   it('should render normally', () => {
     const component = shallowWithI18nProvider(
-      <Header isIncludingSystemIndices={true} onChangeIncludingSystemIndices={() => {}} />
+      <Header
+        indexPatternName={indexPatternName}
+        isIncludingSystemIndices={true}
+        onChangeIncludingSystemIndices={() => {}}
+      />
     );
 
     expect(component).toMatchSnapshot();
   });
 
   it('should render without including system indices', () => {
     const component = shallowWithI18nProvider(
-      <Header isIncludingSystemIndices={false} onChangeIncludingSystemIndices={() => {}} />
+      <Header
+        indexPatternName={indexPatternName}
+        isIncludingSystemIndices={false}
+        onChangeIncludingSystemIndices={() => {}}
+      />
     );
 
     expect(component).toMatchSnapshot();
@@ -44,7 +53,7 @@ describe('Header', () => {
         isIncludingSystemIndices={false}
         onChangeIncludingSystemIndices={() => {}}
         prompt={<div>Test prompt</div>}
-        indexPatternName="test index pattern"
+        indexPatternName={indexPatternName}
         isBeta={true}
       />
     );

diff --git a/...attern_wizard/components/header/header.js → ...ttern_wizard/components/header/header.tsx b/...attern_wizard/components/header/header.js → ...ttern_wizard/components/header/header.tsx
@@ -36,10 +36,17 @@ import { FormattedMessage } from '@kbn/i18n/react';
 export const Header = ({
   prompt,
   indexPatternName,
-  showSystemIndices,
+  showSystemIndices = false,
   isIncludingSystemIndices,
   onChangeIncludingSystemIndices,
-  isBeta,
+  isBeta = false,
+}: {
+  prompt?: React.ReactNode;
+  indexPatternName: string;
+  showSystemIndices?: boolean;
+  isIncludingSystemIndices: boolean;
+  onChangeIncludingSystemIndices: () => void;
+  isBeta?: boolean;
 }) => (
   <div>
     <EuiTitle>

diff --git a/...pattern_wizard/components/header/index.js → ...pattern_wizard/components/header/index.ts b/...pattern_wizard/components/header/index.js → ...pattern_wizard/components/header/index.ts
diff --git a/.../__snapshots__/loading_state.test.js.snap → ...__snapshots__/loading_state.test.tsx.snap b/.../__snapshots__/loading_state.test.js.snap → ...__snapshots__/loading_state.test.tsx.snap
diff --git a/..._wizard/components/loading_state/index.js → ..._wizard/components/loading_state/index.ts b/..._wizard/components/loading_state/index.js → ..._wizard/components/loading_state/index.ts
diff --git a/...ding_state/__jest__/loading_state.test.js → ...ents/loading_state/loading_state.test.tsx b/...ding_state/__jest__/loading_state.test.js → ...ents/loading_state/loading_state.test.tsx
diff --git a/...components/loading_state/loading_state.js → ...omponents/loading_state/loading_state.tsx b/...components/loading_state/loading_state.js → ...omponents/loading_state/loading_state.tsx
diff --git a/...apshots__/step_index_pattern.test.js.snap → ...pshots__/step_index_pattern.test.tsx.snap b/...apshots__/step_index_pattern.test.js.snap → ...pshots__/step_index_pattern.test.tsx.snap
diff --git a/..._jest__/__snapshots__/header.test.js.snap → ...header/__snapshots__/header.test.tsx.snap b/..._jest__/__snapshots__/header.test.js.snap → ...header/__snapshots__/header.test.tsx.snap
diff --git a/...components/header/__jest__/header.test.js → ...pattern/components/header/header.test.tsx b/...components/header/__jest__/header.test.js → ...pattern/components/header/header.test.tsx
@@ -27,7 +27,7 @@ describe('Header', () => {
       <Header
         isInputInvalid={false}
         errors={[]}
-        characterList={['%']}
+        characterList={'%'}
         query={'k'}
         onQueryChanged={() => {}}
         goToNextStep={() => {}}
@@ -43,7 +43,7 @@ describe('Header', () => {
       <Header
         isInputInvalid={true}
         errors={['Input is invalid']}
-        characterList={['%']}
+        characterList={'%'}
         query={'%'}
         onQueryChanged={() => {}}
         goToNextStep={() => {}}

diff --git a/...index_pattern/components/header/header.js → ...ndex_pattern/components/header/header.tsx b/...index_pattern/components/header/header.js → ...ndex_pattern/components/header/header.tsx
@@ -33,7 +33,17 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export const Header = ({
+interface HeaderProps {
+  isInputInvalid: boolean;
+  errors: any;
+  characterList: string;
+  query: string;
+  onQueryChanged: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  goToNextStep: (query: string) => void;
+  isNextStepDisabled: boolean;
+}
+
+export const Header: React.FC<HeaderProps> = ({
   isInputInvalid,
   errors,
   characterList,

diff --git a/..._index_pattern/components/header/index.js → ..._index_pattern/components/header/index.ts b/..._index_pattern/components/header/index.js → ..._index_pattern/components/header/index.ts
diff --git a/..._/__snapshots__/indices_list.test.js.snap → .../__snapshots__/indices_list.test.tsx.snap b/..._/__snapshots__/indices_list.test.js.snap → .../__snapshots__/indices_list.test.tsx.snap
diff --git a/..._pattern/components/indices_list/index.js → ..._pattern/components/indices_list/index.ts b/..._pattern/components/indices_list/index.js → ..._pattern/components/indices_list/index.ts
diff --git a/...ndices_list/__jest__/indices_list.test.js → ...onents/indices_list/indices_list.test.tsx b/...ndices_list/__jest__/indices_list.test.js → ...onents/indices_list/indices_list.test.tsx
@@ -36,7 +36,7 @@ describe('IndicesList', () => {
   it('should change pages', () => {
     const component = shallow(<IndicesList indices={indices} query="" />);
 
-    const instance = component.instance();
+    const instance = component.instance() as IndicesList;
 
     component.setState({ perPage: 1 });
     instance.onChangePage(1);
@@ -48,7 +48,7 @@ describe('IndicesList', () => {
   it('should change per page', () => {
     const component = shallow(<IndicesList indices={indices} query="" />);
 
-    const instance = component.instance();
+    const instance = component.instance() as IndicesList;
     instance.onChangePerPage(1);
     component.update();
 

diff --git a/...n/components/indices_list/indices_list.js → .../components/indices_list/indices_list.tsx b/...n/components/indices_list/indices_list.js → .../components/indices_list/indices_list.tsx
@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { PER_PAGE_INCREMENTS } from '../../../../constants';
+import React from 'react';
 
 import {
   EuiBadge,
@@ -37,17 +35,26 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 
-import { Pager } from '@elastic/eui/lib/services';
+import { Pager } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
+import { PER_PAGE_INCREMENTS } from '../../../../constants';
+import { MatchedIndex, Tag } from '../../../../types';
 
-export class IndicesList extends Component {
-  static propTypes = {
-    indices: PropTypes.array.isRequired,
-    query: PropTypes.string.isRequired,
-  };
+interface IndicesListProps {
+  indices: MatchedIndex[];
+  query: string;
+}
+
+interface IndicesListState {
+  page: number;
+  perPage: number;
+  isPerPageControlOpen: boolean;
+}
 
-  constructor(props) {
+export class IndicesList extends React.Component<IndicesListProps, IndicesListState> {
+  pager: Pager;
+  constructor(props: IndicesListProps) {
     super(props);
 
     this.state = {
@@ -59,7 +66,7 @@ export class IndicesList extends Component {
     this.pager = new Pager(props.indices.length, this.state.perPage, this.state.page);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: IndicesListProps) {
     if (nextProps.indices.length !== this.props.indices.length) {
       this.pager.setTotalItems(nextProps.indices.length);
       this.resetPageTo0();
@@ -68,12 +75,12 @@ export class IndicesList extends Component {
 
   resetPageTo0 = () => this.onChangePage(0);
 
-  onChangePage = page => {
+  onChangePage = (page: number) => {
     this.pager.goToPageIndex(page);
     this.setState({ page });
   };
 
-  onChangePerPage = perPage => {
+  onChangePerPage = (perPage: number) => {
     this.pager.setItemsPerPage(perPage);
     this.setState({ perPage });
     this.resetPageTo0();
@@ -147,7 +154,7 @@ export class IndicesList extends Component {
     );
   }
 
-  highlightIndexName(indexName, query) {
+  highlightIndexName(indexName: string, query: string) {
     const queryIdx = indexName.indexOf(query);
     if (!query || queryIdx === -1) {
       return indexName;
@@ -178,7 +185,7 @@ export class IndicesList extends Component {
             {this.highlightIndexName(index.name, queryWithoutWildcard)}
           </EuiTableRowCell>
           <EuiTableRowCell>
-            {index.tags.map(tag => {
+            {index.tags.map((tag: Tag) => {
               return (
                 <EuiBadge key={`index_${key}_tag_${tag.key}`} color="primary">
                   {tag.name}

diff --git a/..._snapshots__/loading_indices.test.js.snap → ...snapshots__/loading_indices.test.tsx.snap b/..._snapshots__/loading_indices.test.js.snap → ...snapshots__/loading_indices.test.tsx.snap
diff --git a/...ttern/components/loading_indices/index.js → ...ttern/components/loading_indices/index.ts b/...ttern/components/loading_indices/index.js → ...ttern/components/loading_indices/index.ts
diff --git a/..._indices/__jest__/loading_indices.test.js → .../loading_indices/loading_indices.test.tsx b/..._indices/__jest__/loading_indices.test.js → .../loading_indices/loading_indices.test.tsx
diff --git a/...onents/loading_indices/loading_indices.js → ...nents/loading_indices/loading_indices.tsx b/...onents/loading_indices/loading_indices.js → ...nents/loading_indices/loading_indices.tsx
diff --git a/...__snapshots__/status_message.test.js.snap → ..._snapshots__/status_message.test.tsx.snap b/...__snapshots__/status_message.test.js.snap → ..._snapshots__/status_message.test.tsx.snap
diff --git a/...attern/components/status_message/index.js → ...attern/components/status_message/index.ts b/...attern/components/status_message/index.js → ...attern/components/status_message/index.ts
diff --git a/...s_message/__jest__/status_message.test.js → ...ts/status_message/status_message.test.tsx b/...s_message/__jest__/status_message.test.js → ...ts/status_message/status_message.test.tsx
@@ -21,32 +21,60 @@ import React from 'react';
 import { StatusMessage } from '../status_message';
 import { shallow } from 'enzyme';
 
+const tagsPartial = {
+  tags: [],
+};
+
 const matchedIndices = {
-  allIndices: [{ name: 'kibana' }, { name: 'es' }],
+  allIndices: [
+    { name: 'kibana', ...tagsPartial },
+    { name: 'es', ...tagsPartial },
+  ],
   exactMatchedIndices: [],
-  partialMatchedIndices: [{ name: 'kibana' }],
+  partialMatchedIndices: [{ name: 'kibana', ...tagsPartial }],
 };
 
 describe('StatusMessage', () => {
   it('should render without a query', () => {
-    const component = shallow(<StatusMessage matchedIndices={matchedIndices} query={''} />);
+    const component = shallow(
+      <StatusMessage
+        matchedIndices={matchedIndices}
+        query={''}
+        isIncludingSystemIndices={false}
+        showSystemIndices={false}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   it('should render with exact matches', () => {
     const localMatchedIndices = {
       ...matchedIndices,
-      exactMatchedIndices: [{ name: 'kibana' }],
+      exactMatchedIndices: [{ name: 'kibana', ...tagsPartial }],
     };
 
-    const component = shallow(<StatusMessage matchedIndices={localMatchedIndices} query={'k*'} />);
+    const component = shallow(
+      <StatusMessage
+        matchedIndices={localMatchedIndices}
+        query={'k*'}
+        isIncludingSystemIndices={false}
+        showSystemIndices={false}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   it('should render with partial matches', () => {
-    const component = shallow(<StatusMessage matchedIndices={matchedIndices} query={'k'} />);
+    const component = shallow(
+      <StatusMessage
+        matchedIndices={matchedIndices}
+        query={'k'}
+        isIncludingSystemIndices={false}
+        showSystemIndices={false}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });
@@ -57,22 +85,47 @@ describe('StatusMessage', () => {
       partialMatchedIndices: [],
     };
 
-    const component = shallow(<StatusMessage matchedIndices={localMatchedIndices} query={'k'} />);
+    const component = shallow(
+      <StatusMessage
+        matchedIndices={localMatchedIndices}
+        query={'k'}
+        isIncludingSystemIndices={false}
+        showSystemIndices={false}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   it('should show that system indices exist', () => {
     const component = shallow(
-      <StatusMessage matchedIndices={[]} isIncludingSystemIndices={false} query={''} />
+      <StatusMessage
+        matchedIndices={{
+          allIndices: [],
+          exactMatchedIndices: [],
+          partialMatchedIndices: [],
+        }}
+        isIncludingSystemIndices={false}
+        query={''}
+        showSystemIndices={false}
+      />
     );
 
     expect(component).toMatchSnapshot();
   });
 
   it('should show that no indices exist', () => {
     const component = shallow(
-      <StatusMessage matchedIndices={[]} isIncludingSystemIndices={true} query={''} />
+      <StatusMessage
+        matchedIndices={{
+          allIndices: [],
+          exactMatchedIndices: [],
+          partialMatchedIndices: [],
+        }}
+        isIncludingSystemIndices={true}
+        query={''}
+        showSystemIndices={false}
+      />
     );
 
     expect(component).toMatchSnapshot();