TypeScriptified basic_table.

scripts/babel/proptypes-from-ts-props/index.js

@@ -328,6 +328,25 @@ function convertLiteralToOneOf(types, literalNode) {
   );
 }
 
+/**
+ * This function resolves discriminated union types (aka tagged union, algebraic data type).
+ */
+function resolveDiscriminatedUnionType(node, optional, state) {
+  const types = state.get('types');
+
+  if (node.type === 'TSLiteralType') {
+    return types.callExpression(
+      types.memberExpression(
+        types.identifier('PropTypes'),
+        types.identifier('oneOf')
+      ),
+      [types.arrayExpression([types.stringLiteral(node.literal.value)])]
+    );
+  } else {
+    return getPropTypesForNode(node, optional, state);
+  }
+}
+
 /**
  * Heavy lifter to generate the proptype AST for a node. Initially called by `processComponentDeclaration`,
  * its return value is set as the component's `propTypes` value. This function calls itself recursively to translate
@@ -353,7 +372,11 @@ function getPropTypesForNode(node, optional, state) {
     // Array<Foo>
     //       ^^^ Foo
     case 'TSTypeAnnotation':
-      propType = getPropTypesForNode(node.typeAnnotation, true, state);
+      propType = resolveDiscriminatedUnionType(
+        node.typeAnnotation,
+        true,
+        state
+      );
       break;
 
     // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -1095,7 +1095,7 @@ const FooComponent = () => {
 };
 
 FooComponent.propTypes = {
-  type: PropTypes.oneOfType([PropTypes.oneOf(["foo"]), PropTypes.oneOf(["bar"])]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(["foo"]).isRequired, PropTypes.oneOf(["bar"]).isRequired]).isRequired,
   value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired
 };`);
       });
@@ -1457,6 +1457,40 @@ FooComponent.propTypes = {
 };`);
         });
 
+        it('understands discriminated unions', () => {
+          const result = transform(
+            `
+import React from 'react'
+interface OptA { type: 'a'; value: string; }
+interface OptB { type: 'b'; valid: boolean; }
+type Option = OptA | OptB;
+interface Props { option: Option }
+const Foo: React.SFC<Props> = ({ option }: Props) => {
+  return (<div>{option.type == 'a' ? option.value : option.valid}</div>);
+}`,
+            babelOptions
+          );
+
+          expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const Foo = ({
+  option
+}) => {
+  return <div>{option.type == 'a' ? option.value : option.valid}</div>;
+};
+
+Foo.propTypes = {
+  option: PropTypes.oneOfType([PropTypes.shape({
+    type: PropTypes.oneOf(["a"]).isRequired,
+    value: PropTypes.string.isRequired
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["b"]).isRequired,
+    valid: PropTypes.bool.isRequired
+  }).isRequired]).isRequired
+};`);
+        });
+
         it('understands an optional Array of strings and numbers', () => {
           const result = transform(
             `

src/components/basic_table/__snapshots__/basic_table.test.js.snap → src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -370,7 +370,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
             <p>
               no items, click 
               <a
-                href={true}
+                href=""
               >
                 here
               </a>

src/components/basic_table/__snapshots__/custom_item_action.test.js.snap → src/components/basic_table/__snapshots__/custom_item_action.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`CustomItemAction render 1`] = `
 <div
-  style={null}
+  className="test"
 >
   <Component
     onBlur={[Function]}

src/components/basic_table/__snapshots__/default_item_action.test.js.snap → src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DefaultItemAction render - default button 1`] = `
+<EuiToolTip
+  content="action 1"
+  delay="long"
+  position="top"
+>
+  <EuiButtonEmpty
+    color="primary"
+    flush="right"
+    isDisabled={false}
+    onClick={[Function]}
+    size="s"
+  >
+    action1
+  </EuiButtonEmpty>
+</EuiToolTip>
+`;
+
 exports[`DefaultItemAction render - button 1`] = `
 <EuiToolTip
   content="action 1"

src/components/basic_table/__snapshots__/expanded_item_actions.test.js.snap → src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExpandedItemActions render 1`] = `
-Array [
+<Fragment>
   <DefaultItemAction
     action={
       Object {
@@ -20,7 +20,7 @@ Array [
     }
     itemId="xyz"
     key="item_action_xyz_0"
-  />,
+  />
   <CustomItemAction
     action={
       Object {
@@ -39,6 +39,6 @@ Array [
     }
     itemId="xyz"
     key="item_action_xyz_1"
-  />,
-]
+  />
+</Fragment>
 `;

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap → src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
     ]
   }
   data-test-subj="test subject string"
-  executeQueryOptions={Object {}}
   items={
     Array [
       Object {
@@ -44,8 +43,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
       ],
     }
   }
-  responsive={true}
-  sorting={false}
 >
   <EuiBasicTable
     aria-label="aria-label"
@@ -1007,7 +1004,7 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
   responsive={true}
   selection={
     Object {
-      "onSelectionChanged": [Function],
+      "onSelectionChange": [Function],
     }
   }
 />
@@ -1154,7 +1151,7 @@ exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
   responsive={true}
   selection={
     Object {
-      "onSelectionChanged": [Function],
+      "onSelectionChange": [Function],
     }
   }
   sorting={
@@ -1191,7 +1188,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
               "description": "edit",
               "name": "Edit",
               "onClick": [Function],
-              "type": "button",
             },
           ],
           "name": "Actions",
@@ -1234,7 +1230,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
     responsive={true}
     selection={
       Object {
-        "onSelectionChanged": [Function],
+        "onSelectionChange": [Function],
       }
     }
     sorting={
@@ -1265,7 +1261,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
             "description": "edit",
             "name": "Edit",
             "onClick": [Function],
-            "type": "button",
           },
         ],
         "name": "Actions",
@@ -1308,7 +1303,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
   responsive={true}
   selection={
     Object {
-      "onSelectionChanged": [Function],
+      "onSelectionChange": [Function],
     }
   }
   sorting={
@@ -1367,7 +1362,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and column rendere
   responsive={true}
   selection={
     Object {
-      "onSelectionChanged": [Function],
+      "onSelectionChange": [Function],
     }
   }
   sorting={
@@ -1384,9 +1379,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
   <EuiSearchBar
     box={
       Object {
-        "aria-label": "aria-label",
-        "className": "testClass1 testClass2",
-        "data-test-subj": "test subject string",
         "incremental": true,
       }
     }
@@ -1424,7 +1416,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
               "description": "edit",
               "name": "Edit",
               "onClick": [Function],
-              "type": "button",
             },
           ],
           "name": "Actions",
@@ -1459,7 +1450,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
     responsive={true}
     selection={
       Object {
-        "onSelectionChanged": [Function],
+        "onSelectionChange": [Function],
       }
     }
     sorting={

src/components/basic_table/action_types.ts

@@ -0,0 +1,43 @@
+import { EuiIconType } from '../icon/icon';
+import { ButtonIconColor } from '../button/button_icon/button_icon';
+import { EuiButtonEmptyColor } from '../button/button_empty/button_empty';
+
+type IconFunction = (item: any) => EuiIconType;
+type ButtonColor = ButtonIconColor | EuiButtonEmptyColor;
+type ButtonIconColorFunction = (item: any) => ButtonColor;
+
+interface DefaultItemActionBase {
+  name: string;
+  description: string;
+  onClick?: (item: any) => void;
+  href?: string;
+  target?: string;
+  available?: (item: any) => boolean;
+  enabled?: (item: any) => boolean;
+  isPrimary?: boolean;
+  'data-test-subj'?: string;
+}
+
+export interface DefaultItemEmptyButtonAction extends DefaultItemActionBase {
+  type?: 'button';
+  color?: EuiButtonEmptyColor | ButtonIconColorFunction;
+}
+
+export interface DefaultItemIconButtonAction extends DefaultItemActionBase {
+  type: 'icon';
+  icon: EuiIconType | IconFunction;
+  color?: ButtonIconColor | ButtonIconColorFunction;
+}
+
+export type DefaultItemAction =
+  | DefaultItemEmptyButtonAction
+  | DefaultItemIconButtonAction;
+
+export interface CustomItemAction {
+  render: (item: any, enabled?: boolean) => any;
+  available?: (item: any) => boolean;
+  enabled?: (item: any) => boolean;
+  isPrimary?: boolean;
+}
+
+export type Action = DefaultItemAction | CustomItemAction;

src/components/basic_table/basic_table.behavior.test.js → src/components/basic_table/basic_table.behavior.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { findTestSubject } from '../../test';
 
-import { EuiBasicTable } from './basic_table';
+import { EuiBasicTable, Props } from './basic_table';
 
 describe('EuiBasicTable', () => {
   describe('behavior', () => {
     describe('selected items', () => {
-      let props;
-      let component;
+      let props: Props;
+      let component: ReactWrapper;
 
       beforeEach(() => {
         props = {
@@ -22,7 +22,7 @@ describe('EuiBasicTable', () => {
             },
           ],
           selection: {
-            onSelectionChanged: () => {},
+            onSelectionChange: () => {},
           },
           onChange: () => {},
         };