Update deprecated React.SFC and React.StatelessComponent types

TYPESCRIPT.md

@@ -21,7 +21,7 @@ The first thing that will probably happen when you convert a `.js` file in our s
 
 declare module '@elastic/eui' {
   // Add your types here
-  export const EuiPopoverTitle: React.SFC<EuiPopoverTitleProps>;
+  export const EuiPopoverTitle: React.FC<EuiPopoverTitleProps>;
   ...
 }
 ```
@@ -47,13 +47,13 @@ Since `@elastic/eui` already ships with a module declaration, any local addition
 // file `typings/@elastic/eui/index.d.ts`
 
 import { CommonProps } from '@elastic/eui';
-import { SFC } from 'react';
+import { FC } from 'react';
 
 declare module '@elastic/eui' {
   export type EuiNewComponentProps = CommonProps & {
     additionalProp: string;
   };
-  export const EuiNewComponent: SFC<EuiNewComponentProps>;
+  export const EuiNewComponent: FC<EuiNewComponentProps>;
 }
 ```
 

packages/eslint-config-kibana/typescript.js

@@ -6,20 +6,16 @@
 const semver = require('semver');
 const PKG = require('../../package.json');
 
-const eslintConfigPrettierTypescriptEslintRules = require('eslint-config-prettier/@typescript-eslint').rules;
+const eslintConfigPrettierTypescriptEslintRules = require('eslint-config-prettier/@typescript-eslint')
+  .rules;
 
 module.exports = {
   overrides: [
     {
       files: ['**/*.{ts,tsx}'],
       parser: '@typescript-eslint/parser',
 
-      plugins: [
-        '@typescript-eslint',
-        'ban',
-        'import',
-        'prefer-object-spread',
-      ],
+      plugins: ['@typescript-eslint', 'ban', 'import', 'prefer-object-spread'],
 
       settings: {
         'import/resolver': {
@@ -43,7 +39,7 @@ module.exports = {
         sourceType: 'module',
         ecmaVersion: 2018,
         ecmaFeatures: {
-          jsx: true
+          jsx: true,
         },
         // NOTE: That is to avoid a known performance issue related with the `ts.Program` used by
         // typescript eslint. As we are not using rules that need types information, we can safely
@@ -52,7 +48,7 @@ module.exports = {
         // https://github.com/typescript-eslint/typescript-eslint/issues/389
         // https://github.com/typescript-eslint/typescript-eslint/issues/243
         // https://github.com/typescript-eslint/typescript-eslint/pull/361
-        project: undefined
+        project: undefined,
       },
 
       // NOTE: we can't override the extends option here to apply
@@ -69,62 +65,96 @@ module.exports = {
           //
           // Old recommended tslint rules
           '@typescript-eslint/adjacent-overload-signatures': 'error',
-          '@typescript-eslint/array-type': ['error', { default: 'array-simple', readonly: 'array-simple' }],
-          '@typescript-eslint/ban-types': 'error',
-          'camelcase': 'off',
-          '@typescript-eslint/camelcase': ['error', {
-            'properties': 'never',
-            'ignoreDestructuring': true,
-            'allow': ['^[A-Z0-9_]+$']
-          }],
+          '@typescript-eslint/array-type': [
+            'error',
+            { default: 'array-simple', readonly: 'array-simple' },
+          ],
+          '@typescript-eslint/ban-types': [
+            'error',
+            {
+              types: {
+                SFC: {
+                  message: 'Use FC or FunctionComponent instead.',
+                  fixWith: 'FC',
+                },
+                'React.SFC': {
+                  message: 'Use FC or FunctionComponent instead.',
+                  fixWith: 'React.FC',
+                },
+                StatelessComponent: {
+                  message: 'Use FunctionComponent instead.',
+                  fixWith: 'FunctionComponent',
+                },
+                'React.StatelessComponent': {
+                  message: 'Use FunctionComponent instead.',
+                  fixWith: 'React.FunctionComponent',
+                },
+              },
+            },
+          ],
+          camelcase: 'off',
+          '@typescript-eslint/camelcase': [
+            'error',
+            {
+              properties: 'never',
+              ignoreDestructuring: true,
+              allow: ['^[A-Z0-9_]+$'],
+            },
+          ],
           '@typescript-eslint/class-name-casing': 'error',
-          '@typescript-eslint/explicit-member-accessibility': ['error',
+          '@typescript-eslint/explicit-member-accessibility': [
+            'error',
             {
               accessibility: 'off',
               overrides: {
                 accessors: 'explicit',
                 constructors: 'no-public',
-                parameterProperties: 'explicit'
-              }
-            }
+                parameterProperties: 'explicit',
+              },
+            },
           ],
-          'indent': 'off',
-          '@typescript-eslint/indent': [ 'error', 2, { SwitchCase: 1 } ],
+          indent: 'off',
+          '@typescript-eslint/indent': ['error', 2, { SwitchCase: 1 }],
           '@typescript-eslint/prefer-function-type': 'error',
           '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
-          '@typescript-eslint/member-ordering': ['error', {
-            'default': ['public-static-field', 'static-field', 'instance-field']
-          }],
+          '@typescript-eslint/member-ordering': [
+            'error',
+            {
+              default: ['public-static-field', 'static-field', 'instance-field'],
+            },
+          ],
           '@typescript-eslint/consistent-type-assertions': 'error',
           '@typescript-eslint/no-empty-interface': 'error',
           '@typescript-eslint/no-misused-new': 'error',
           '@typescript-eslint/no-namespace': 'error',
-          '@typescript-eslint/triple-slash-reference': ['error', {
-            path: 'never',
-            types: 'never',
-            lib: 'never'
-          }],
+          '@typescript-eslint/triple-slash-reference': [
+            'error',
+            {
+              path: 'never',
+              types: 'never',
+              lib: 'never',
+            },
+          ],
           '@typescript-eslint/no-var-requires': 'error',
           '@typescript-eslint/type-annotation-spacing': 'error',
           '@typescript-eslint/unified-signatures': 'error',
           'arrow-body-style': 'error',
           'arrow-parens': 'error',
           'comma-dangle': ['error', 'always-multiline'],
           'constructor-super': 'error',
-          'curly': 'error',
+          curly: 'error',
           'dot-notation': 'error',
           'eol-last': 'error',
-          'eqeqeq': ['error', 'always', {'null': 'ignore'}],
+          eqeqeq: ['error', 'always', { null: 'ignore' }],
           'guard-for-in': 'error',
-          'import/order': ['error', {
-            'groups': [
-              ['external', 'builtin'],
-              'internal',
-              ['parent', 'sibling', 'index'],
-            ],
-          }],
+          'import/order': [
+            'error',
+            {
+              groups: [['external', 'builtin'], 'internal', ['parent', 'sibling', 'index']],
+            },
+          ],
           'max-classes-per-file': ['error', 1],
-          'max-len': [ 'error', { code: 120, ignoreComments: true, ignoreUrls: true } ],
+          'max-len': ['error', { code: 120, ignoreComments: true, ignoreUrls: true }],
           'new-parens': 'error',
           'no-bitwise': 'error',
           'no-caller': 'error',
@@ -146,34 +176,40 @@ module.exports = {
           'no-var': 'error',
           'object-curly-spacing': 'error',
           'object-shorthand': 'error',
-          'one-var': [ 'error', 'never' ],
+          'one-var': ['error', 'never'],
           'prefer-const': 'error',
-          'quotes': ['error', 'double', { 'avoidEscape': true }],
+          quotes: ['error', 'double', { avoidEscape: true }],
           'quote-props': ['error', 'consistent-as-needed'],
-          'radix': 'error',
-          'semi': 'error',
-          'space-before-function-paren': ['error', {
-            'anonymous': 'never',
-            'named': 'never',
-            'asyncArrow': 'always'
-          }],
-          'spaced-comment': ["error", "always", {
-            "exceptions": ["/"]
-          }],
+          radix: 'error',
+          semi: 'error',
+          'space-before-function-paren': [
+            'error',
+            {
+              anonymous: 'never',
+              named: 'never',
+              asyncArrow: 'always',
+            },
+          ],
+          'spaced-comment': [
+            'error',
+            'always',
+            {
+              exceptions: ['/'],
+            },
+          ],
           'use-isnan': 'error',
 
           // Old tslint yml override or defined rules
           'ban/ban': [
             2,
-            {'name': ['describe', 'only'], 'message': 'No exclusive suites.'},
-            {'name': ['it', 'only'], 'message': 'No exclusive tests.'},
-            {'name': ['test', 'only'], 'message': 'No exclusive tests.'},
-
+            { name: ['describe', 'only'], message: 'No exclusive suites.' },
+            { name: ['it', 'only'], message: 'No exclusive tests.' },
+            { name: ['test', 'only'], message: 'No exclusive tests.' },
           ],
           'import/no-default-export': 'error',
         },
         eslintConfigPrettierTypescriptEslintRules
-      )
+      ),
     },
-  ]
+  ],
 };

packages/kbn-i18n/package.json

@@ -28,7 +28,7 @@
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
+    "react": "^16.8.0",
     "react-intl": "^2.8.0"
   }
 }

packages/kbn-ui-framework/package.json

@@ -19,7 +19,7 @@
     "focus-trap-react": "^3.1.1",
     "lodash": "npm:@elastic/[email protected]",
     "prop-types": "15.6.0",
-    "react": "^16.2.0",
+    "react": "^16.8.0",
     "react-ace": "^5.9.0",
     "react-color": "^2.13.8",
     "tabbable": "1.1.3",
@@ -57,7 +57,7 @@
     "postcss": "^7.0.5",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",

rfcs/text/0006_management_section_service.md

@@ -260,10 +260,10 @@ interface API {
   PAGE_TITLE_COMPONENT: string; // actually related to advanced settings?
   PAGE_SUBTITLE_COMPONENT: string; // actually related to advanced settings?
   PAGE_FOOTER_COMPONENT: string; // actually related to advanced settings?
-  SidebarNav: React.SFC<any>;
+  SidebarNav: React.FC<any>;
   registerSettingsComponent: (
     id: string,
-    component: string | React.SFC<any>,
+    component: string | React.FC<any>,
     allowOverride: boolean
   ) => void;
   management: new ManagementSection();

src/core/public/application/ui/app_router.tsx

@@ -39,7 +39,7 @@ interface Props {
   redirectTo?: (path: string) => void;
 }
 
-export const AppRouter: React.StatelessComponent<Props> = ({
+export const AppRouter: React.FunctionComponent<Props> = ({
   history,
   redirectTo = (path: string) => (window.location.href = path),
   ...otherProps

src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx

@@ -19,7 +19,7 @@
 
 import { EuiBadge, useInnerText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import { FilterLabel } from '../filter_editor/lib/filter_label';
 import { esFilters } from '../../../../../../../plugins/data/public';
 
@@ -29,7 +29,7 @@ interface Props {
   [propName: string]: any;
 }
 
-export const FilterView: SFC<Props> = ({
+export const FilterView: FC<Props> = ({
   filter,
   iconOnClick,
   onClick,

src/legacy/ui/public/capabilities/react/inject_ui_capabilities.test.tsx

@@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
 import { UICapabilitiesProvider } from './ui_capabilities_provider';
 
 describe('injectUICapabilities', () => {
-  it('provides UICapabilities to SFCs', () => {
-    interface SFCProps {
+  it('provides UICapabilities to FCs', () => {
+    interface FCProps {
       uiCapabilities: UICapabilities;
     }
 
-    const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
+    const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
       return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
     });
 
     const wrapper = mount(
       <UICapabilitiesProvider>
-        <MySFC />
+        <MyFC />
       </UICapabilitiesProvider>
     );
 

src/legacy/ui/public/capabilities/react/legacy/inject_ui_capabilities.test.tsx

@@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
 import { UICapabilitiesProvider } from './ui_capabilities_provider';
 
 describe('injectUICapabilities', () => {
-  it('provides UICapabilities to SFCs', () => {
-    interface SFCProps {
+  it('provides UICapabilities to FCs', () => {
+    interface FCProps {
       uiCapabilities: UICapabilities;
     }
 
-    const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
+    const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
       return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
     });
 
     const wrapper = mount(
       <UICapabilitiesProvider>
-        <MySFC />
+        <MyFC />
       </UICapabilitiesProvider>
     );
 

src/legacy/ui/public/capabilities/react/ui_capabilities_provider.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { UICapabilitiesContext } from './ui_capabilities_context';
 import { capabilities } from '..';
 
-export const UICapabilitiesProvider: React.SFC = props => (
+export const UICapabilitiesProvider: React.FC = props => (
   <UICapabilitiesContext.Provider value={capabilities.get()}>
     {props.children}
   </UICapabilitiesContext.Provider>

src/legacy/ui/public/i18n/index.tsx

@@ -27,7 +27,7 @@ import { npStart } from 'ui/new_platform';
 export const I18nContext = npStart.core.i18n.Context;
 
 export function wrapInI18nContext<P>(ComponentToWrap: React.ComponentType<P>) {
-  const ContextWrapper: React.SFC<P> = props => {
+  const ContextWrapper: React.FC<P> = props => {
     return (
       <I18nContext>
         <ComponentToWrap {...props} />

src/legacy/ui/public/management/index.d.ts

@@ -21,10 +21,10 @@ declare module 'ui/management' {
   export const PAGE_TITLE_COMPONENT: string;
   export const PAGE_SUBTITLE_COMPONENT: string;
   export const PAGE_FOOTER_COMPONENT: string;
-  export const SidebarNav: React.SFC<any>;
+  export const SidebarNav: React.FC<any>;
   export function registerSettingsComponent(
     id: string,
-    component: string | React.SFC<any>,
+    component: string | React.FC<any>,
     allowOverride: boolean
   ): void;
   export const management: any; // TODO - properly provide types